在Google地图中显示可见标记，许多标记

Question

我正在为荷兰的一种商店建立商店定位器。这是很多数据，目前有3455个标记放置在地图上。 我已经实现了markerclusterer来加载地图更快。

但我想有一张地图上所有当前可见标记的列表。我有这个例子工作（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(); 
     } 
    } 
} 

Answer 1

相反，一次与所有标记的工作，去想想刚刚当用户更新视请求。

的方式去请考虑：

• 当有任何视更新，你得到的map中心，并要求标记靠近他，用lat/lng性能。
• 根据需求提出的请求更适合于有很多标记的案例。

一些事件的帮助：

• bounds_changed
• dragend
• dragstart
• idle

我对my codepen做出了表率为一个更好的了解。有关每个新标记的lat/lng的更多详细信息，请参阅浏览器控制台。

查看更多有关谷歌地图事件：https://developers.google.com/maps/documentation/javascript/events

祝你好运！