Google Map API V3：MarkerClusterer不會分解爲標記

Question

我有一個應用程序，我正在使用Google Map API顯示用戶使用其經緯度製作的帖子的標記。我使用了MarkerClusterer功能來更好地組織標記，這種方法可行，但存在各種缺陷。

基本上，我一直在家裏測試這個，所以經緯度對所有測試帖子都一樣。在使用MarkerClusterer之前，放大地圖最終會顯示所有標記。不幸的是，如果使用MarkerClusterer，例如如果列出了一個「5」，這些標記的數量非常接近，比如這些測試帖子，那麼點擊集羣就不會顯示任何內容。當這些非常接近時沒有標記出現。重申一下，這些標記確實沒有MarkerClusterer。

我通過另一篇文章將MarkerClustererPlus v2.0.9升級爲MarkerClusterer的其他問題，但尚未解決問題。

任何有關這個問題的深入瞭解將不勝感激。

編輯：geocodezip建議overlappingmarkerspidifier，這聽起來不錯，但我的代碼是相當涉及，我不知道如何將它納入。任何洞察力非常感謝。代碼如下：

function mainGeo() 
{ 
    if (navigator.geolocation) 
     { 
      navigator.geolocation.getCurrentPosition(mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true}); 
    } 
    else 
    { 
      alert("Sorry, but it looks like your browser does not support geolocation."); 
    } 
} 


var stories = {{storyJson|safe}}; 
var geocoder; 
var map; 
var markers = []; 

function loadMarkers(stories){ 

    for (i=0;i<stories.length;i++) { 
     var story = stories[i];  
     if (story.copy.length > 120) { 
       story.copy = story.copy.substring(0, 120) + "..."; 
      } 

     (function(story) {  
      var pinColor = "69f2ff"; 
       var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor, 
        new google.maps.Size(21, 34), 
        new google.maps.Point(0,0), 
        new google.maps.Point(10, 34)); 
      var point = new google.maps.LatLng(story.latitude, story.longitude); 
      var marker = new google.maps.Marker({position: point, map: map, icon: pinImage}); 
      var infowindow = new google.maps.InfoWindow({ 
      content: '<div >'+ 
       '<div >'+ 
       '</div>'+ 
       '<h2 class="firstHeading">'+story.headline+'</h2>'+ 
       '<div>'+ 
       '<span>'+story.author+'</span><br />'+ 
       '<span>'+story.city+'</span><br />'+ 
       '<span>'+story.topic+'</span><br />'+ 
       '<p>'+story.date+'</p>'+ 
       '<p>'+story.copy+'</p>'+ 
       '<p><a href='+story.url+'>Click to read story</a></p>'+ 
       '</div>'+ 
       '</div>' 

      }); 

      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,this); 

      }); 
      markers.push(marker); 

     })(story); 

    } 

} 




function mainMap(position) 
{ 
     geocoder = new google.maps.Geocoder(); 
     // Define the coordinates as a Google Maps LatLng Object 
     var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     var width = window.innerWidth - 80; 
     size = width; 

     // Prepare the map options 
     var mapOptions = 
     { 
        zoom: 15, 
        center: coords, 
        mapTypeControl: false, 
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Create the map, and place it in the map_canvas div 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     // Place the initial marker 
     var marker = new google.maps.Marker({ 
        position: coords, 
        map: map, 
        title: "Your current location!" 
     }); 

     loadMarkers(stories); 
     var markerCluster = new MarkerClusterer(map, markers); 

    } 


    function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 


function error() { 
    alert("You have refused to display your location. You will not be able to submit stories."); 
    } 

mainGeo(); 

Answer 1

也許這post in the v3 group: Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier可能幫助：

聽起來就像是OverlapingMarkerSpiderifier解決您的問題。