Google Map API V3：MarkerClusterer 不会分解为标记

Question

我有一个应用程序，我在其中使用 Google Map API 来显示用户使用他们的纬度/经度发表的帖子的标记。我使用 MarkerClusterer 功能来更好地组织标记，该功能有效，但存在各种错误。

基本上，我一直在家里对此进行测试，因此所有测试帖子的纬度/经度都是相同的。在使用 MarkerClusterer 之前，放大地图最终会显示所有标记。不幸的是，使用 MarkerClusterer，例如，如果列出“5”表示非常接近的标记数量（例如这些测试帖子），则单击集群不会显示任何内容。当它们非常靠近时，不会出现任何标记。重申一下，这些标记确实在没有 MarkerClusterer 的情况下出现。

我根据另一篇描述 MarkerClusterer 的其他问题的帖子升级到 MarkerClusterPlus v2.0.9，但这并没有解决问题。

任何对此问题的见解将不胜感激。

编辑：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 可以解决您的问题。