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

행운을 빕니다!