在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

祝你好運！