Google Map API V3：MarkerClusterer不会分解为标记 [英] Google Map API V3: MarkerClusterer won't break down into markers

问题描述

我有一个应用程式，我正在使用Google地图API来显示用户使用其经纬度制作的帖子的标记。我使用了MarkerClusterer功能来更好地组织标记，这种方法很有效，但有一些问题。

I have an application where I'm using the Google Map API to display markers for posts made by users using their lat/lon. I employed the MarkerClusterer capability for better organization of the markers, which works but with a bug of sorts.

基本上，我一直在家里测试这个，所以lat / lon对所有测试帖子都一样。在使用MarkerClusterer之前，放大地图最终会显示所有标记。不幸的是，如果使用MarkerClusterer，例如如果列出了一个5，这些标记的数量非常接近，比如这些测试帖子，那么点击集群就不会显示任何内容。当这些非常接近时没有标记出现。要重申，这些标记在没有MarkerClusterer的情况下出现。

Essentially, I've been testing this at home so the lat/lon has been the same for all test posts. Before using MarkerClusterer, zooming far into the map would eventually reveal all the markers. Unfortunately, using the MarkerClusterer, if there is, for example, a "5" listed for the number of markers that are very close together such as these test posts, clicking on the cluster reveals nothing. No markers ever appear when these are very close together. To reiterate, these markers do appear without the MarkerClusterer.

我通过另一篇文章升级到MarkerClustererPlus v2.0.9，描述了MarkerClusterer的其他问题，但尚未解决问题。

I upgraded to MarkerClustererPlus v2.0.9 per another post that described other issues with the MarkerClusterer but that hasn't solved the problem.

对此问题的深入了解将不胜感激。

Any insight into this issue would be greatly appreciated.

编辑：geocodezip建议overlapmarkerspidifier，这听起来很棒，但我的代码相当复杂，我不确定如何合并它。任何洞察力非常感谢。代码如下：

geocodezip suggested the overlappingmarkerspidifier, which sounds great, but my code is fairly involved and I'm not sure how to incorporate it. Any insight much appreciated. Code follows:

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();

推荐答案

也许这是发布在v3组中：Google Map上的重叠标记？ Meet OverlappingMarkerSpiderfier 可能会有所帮助：

Perhaps this post in the v3 group: Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier might help:

听起来像是 OverlapingMarkerSpiderifier 解决了您的问题。

Sounds like the OverlapingMarkerSpiderifier solves your problem.

这篇关于Google Map API V3：MarkerClusterer不会分解为标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！