在Google地图中显示可见标记,许多标记
问题描述:
我正在为荷兰的一种商店建立商店定位器。这是很多数据,目前有3455个标记放置在地图上。 我已经实现了markerclusterer来加载地图更快。在Google地图中显示可见标记,许多标记
但我想有一张地图上所有当前可见标记的列表。我有这个例子工作(http://jsfiddle.net/glafarge/mbuLw/),但它非常非常慢,标记数组中的3455项。
有没有人知道这个解决方案?
这是我当前的代码:
var map,markers = [], mc;
function initMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-28, 135),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
});
mc = new MarkerClusterer(map, {imagePath: 'images/maps'});
}
function centerMap(newLat, newLong){
map.setCenter({
lat: newLat,
lng: newLong
});
map.setZoom(18);
}
function setCurrentPosition(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
var geolocation = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
centerMap(lat, long);
})
}
}
$(document).ready(function(){
setCurrentPosition();
var marker;
$.ajax({
url: '*[getshoplocationslink]*',
cache: false,
success: function(data){
for(var i = 0; i< data.length; i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].loc[1], data[i].loc[0]),
map: map,
title: data[i].name,
icon: 'images/map_pin.png'
});
var content = '*[loading icon]*';
var id = data[i]._id
bindShopInfo(marker, map, content, data[i]._id);
markers.push(marker);
google.maps.event.addListener(map, 'idle', function(){
showVisibleMarkers();
});
$('#shoplist').append('<div class="info info-' + (i+1) +'">'+ data[i].name + '</div>');
}
mc.addMarkers(markers);
$('#loading').addClass('hidden');
}
//end ajax
});
function bindShopInfo(marker, map, content, shopId){
marker.addListener('click', function(){
$('#shopinfo').toggleClass("hidden", false);
$('#shopinfo').fadeIn("slow");
$('#shopinfo').html(content);
loadShop(shopId); //load additional data through another ajax function
});
}
function showVisibleMarkers(){
var bounds = map.getBounds(),
count = 0;
for(var i = 0; i < markers.length; i++){
var marker = markers[i], infoPanel = $('.info-' + (i+1));
if(bounds.contains(marker.getPosition()) == true){
infoPanel.show();
count ++;
}else{
infoPanel.hide();
}
}
}
答
相反,一次与所有标记的工作,去想想刚刚当用户更新视请求。
的方式去请考虑:
- 当有任何视更新,你得到的
map
中心,并要求标记靠近他,用lat
/lng
性能。 - 根据需求提出的请求更适合于有很多标记的案例。
一些事件的帮助:
bounds_changed
dragend
dragstart
idle
我对my codepen做出了表率为一个更好的了解。有关每个新标记的lat
/lng
的更多详细信息,请参阅浏览器控制台。
查看更多有关谷歌地图事件:https://developers.google.com/maps/documentation/javascript/events
祝你好运!
有趣的想法。我会解决这个问题,如果完成了,现在就让你。 – NVO
地图将更新为'空闲'。你的例子真的很有帮助。谢谢! – NVO