google-maps - 当同一位置有多个标记时，重叠标记 Spiderfier 标记图标

Question

Google map 不提供分解同一位置的多个标记的方法。这种情况可能发生在位于多个居住地点(例如公寓楼或专业服务大楼)的人员或企业身上。根据缩放级别，它也可能发生在购物中心等处。

解决方法是“蜘蛛化”它们:当单击第一个时，它会用一条指向该位置的线将它们打破。这是在 Google Earth 中完成的，George MacKerron 为 Google Maps 编写了一个包来完成此操作。 ( https://github.com/jawj/OverlappingMarkerSpiderfier )

它可以与markerclusterer集成，尽管它不支持marker clusterer批量创建marker。

我的问题是，我正在开发的应用程序想要为不同类型的事件提供特定的图标。 Spiderfier 将其中一个标记放在顶部。看 map 的人无法知道顶部标记下方可能有 10 个或更多其他标记。

理想情况下，有一种方法可以放置一个顶部标记，当有多个标记与标记簇中的不同图标相似时，该标记就会显示。它不是直接的一对一，因为 Spiderfier 在它们靠近但不完全相同的位置(默认为 20 像素)时也可以工作，并且 MarkerCluster 没有提供访问完全相同位置的多个标记的规定。

理想的行为是为蜘蛛提供一个特殊的图标，当点击它时，它会闯入蜘蛛化的单个图标中。与markerclusterer类似，但没有缩放更改并处理相同的位置。理想情况下，特殊图标会指示该位置有多少其他标记，同样类似于标记簇。特殊图标可以隐藏或成为蜘蛛化组的一部分。

如果没有一些住宿，用户将无法知道该位置有多种事件。他们甚至可能认为他们想要的事件不在该位置，因为显示了另一个事件标记。

这是一个有问题的笨蛋:http://plnkr.co/edit/vimZNq?p=info

  var markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < 100; ++i) {
    var latLng = new google.maps.LatLng(Math.floor(Math.random() * 10) / 10 + 39,
      Math.floor(Math.random() * 10) / 10 - 100);
    var marker = new google.maps.Marker({
      position: latLng,
      title: "marker " + i + " pos: " + latLng,
      maxZoom: 8,
      map: map

    });
    marker.desc = marker.getTitle();
    bounds.extend(latLng);
    markers.push(marker);
    oms.addMarker(marker);
  }

  map.fitBounds(bounds);

  var markerCluster = new MarkerClusterer(map, markers);

感谢您的帮助，

大卫

Answer 1

这就是我如何让它工作的。其中 map 是 Gmap 实例，oms 是重叠标记 Spiderfier 实例。我们还在初始缩放中使用了标记聚类器，这为我们赢得了休息。

map.addListener('zoom_changed', function() {        

    map.addListenerOnce('idle', function() {

        // change spiderable markers to plus sign markers
        // we are lucky here in that initial map is completely clustered
        // for there is no init listener in oms :(
        // so we swap on the first zoom/idle
        // and subsequently any other zoom/idle

        var spidered = oms.markersNearAnyOtherMarker();

        for (var i = 0; i < spidered.length; i ++) {

            // this was set when we created the markers
            url = spidered[i].icon.url;

            // code to manipulate your spidered icon url
        };

    });

});


oms.addListener('unspiderfy', function(markers) {

    var spidered = markers;

    for (var i = 0; i < spidered.length; i ++) {

        url = spidered[i].icon.url;

        // change it back
    };
});


oms.addListener('click', function(marker) {

  // put the clicked-on marker on top
  // when oms un-spiders

  marker.zIndex=999;

  // set infowindow, panning etc.

});