Question

Google地图不提供拆分位于同一位置的多个标记的方法。这可能发生在多个居住地点的人或企业，例如公寓楼或专业服务楼。根据缩放级别，它也可以在购物中心等处发生。

绕过它的方法就是“蜘蛛网”它们：当点击第一个它时，它会用一条到达该位置的线将它们分开。这是在Google地球中完成的，George MacKerron为谷歌地图编写了一个包。（https://github.com/jawj/OverlappingMarkerSpiderfier）

它可以与markerclusterer集成，但它不支持marker clusterer批量创建标记。

我的问题是我正在处理的应用程序想要为不同类型的活动提供特定的图标。 Spiderfier将其中一个标记置于顶部。看地图的人无法知道顶部标记下方可能有10个或更多其他标记。

理想情况下，当有多个标记类似于markercluster中的不同图标时，会有一种方法可以显示顶部标记。它不是直接的1对1，因为蜘蛛侠在它们靠近但不完全在同一位置（默认为20像素）时也可以工作，并且markercluster没有提供在完全相同的位置访问多个标记。

理想的行为是蜘蛛有一个特殊的图标，当点击时它会闯入蜘蛛状的个体图标。与markersclusterer类似，但没有变焦和处理相同的位置。理想情况下，特殊图标将指示现场有多少其他标记，再次类似于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

以下是我如何使用它。其中catgets()是Gmap实例，而map是重叠标记Spiderfier实例。我们还在初始缩放时使用Marker Clusterer，让我们休息一下。

oms

Answer 2

我设法匹配以下版本：

MarkerClusterer 2.0.13
OverlappingMarkerSpiderfier 3.27

在每次创建新标记时，我将initialIconUrl存储在标记对象

中

 var marker = new google.maps.Marker({
    position: //some position
});

marker.setIcon(iconUrl);
marker.initialIconUrl = iconUrl;

声明OverlappingMarkerSpiderfier时，将nearbyDistance设置为0.001（或其他一些非常小的值）。

this.oms = new OverlappingMarkerSpiderfier(this.map, {
    markersWontMove: true,
    markersWontHide: true,
    nearbyDistance: 0.001 //This will only spiderfy the Markers if they have the exact same position
});

然后，我们需要在地图'空闲'事件上有一个监听器，以手动格式化标记。我需要这个，因为当从Clustered Marker转移到单独的标记时，我的SPIDERFIABLE标记在第一步时不能正确显示。

var me = this;
google.maps.event.addListener(this.map, 'idle', function () {
    me.oms.formatMarkers();
});

聆听oms'格式'事件并为蜘蛛侠标记设置iconURL。如果标记不可蜘蛛侠，请将Icon重置为初始Url。

var spiderfiableIconUrl = //Whatever you need

this.oms.addListener('format', function (marker, status) {
    var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE
        ? spiderfiableIconUrl :
        marker.initialIconUrl;

    marker.setIcon(iconURL);
});

希望这有帮助。

Answer 3

有些方法似乎很有趣，比如markersNearAnyOtherMarker，但我无法让它发挥作用。一个有趣的方法可能是使用spiderfy和unspiderfy事件并在它被解雇时更改标记

overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel('*');
        marker.setIcon(myNormalIcon);
    })
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
    markers.forEach(function (marker) {
        marker.setLabel(''+markers.length);
        marker.setIcon(myOverlapIcon);
    })
})

不幸的是，unspiderfy事件在我们打开然后关闭重叠标记之前都没有被触发。如果我找到这个解决方案的结论，我会更新这篇文章。

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

3 个答案: