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

の代わりに一度にすべてのマーカーとの仕事は、ユーザーがビューポートを更新するだけで要求について考えてみてください：

これは私の現在のコードです。

• どんなビューポートの更新、あなたはlat/lngプロパティを使用して、そこmapの中心を取得し、彼の近くにマーカーを要求したとき：

  を経由して行く考えてみましょう。

• 多くのマーカーがある場合は、リクエストによるリクエストがより適切です。

助けのためのいくつかのイベント：

• bounds_changed
• dragend
• dragstart
• idle

私は1つをよりよく理解するためにmy codepenに例を作りました。各新しいマーカーのlat/lngの詳細については、ブラウザのコンソールを参照してください。

は、Googleマップのイベントの詳細を参照してください：https://developers.google.com/maps/documentation/javascript/events

幸運を！