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

Question

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

解决这个问题的方法是"蜘蛛网":当点击第一个时,它会用一条线将它们分开.这是在Google地球中完成的,George MacKerron为谷歌地图编写了一个包.(https://github.com/jawj/OverlappingMarkerSpiderfier)

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

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

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

理想的行为将是蜘蛛的特殊图标,当点击时它会闯入蜘蛛状的个体图标.与markersclusterer类似,但没有变焦和处理相同的位置.理想情况下,特殊图标将指示现场有多少其他标记,再次类似于markerclusterer.特殊图标可以隐藏或成为蜘蛛网组的一部分.

如果没有一些住宿,用户就无法知道该地点有多个活动.他们甚至可能认为他们想要的活动不在那个位置,因为显示了另一个活动标记.

这是一个有问题的plunker: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

以下是我如何使用它.mapGmap实例在哪里,oms是重叠标记Spiderfier实例.我们也在初始缩放时使用Marker Clusterer,让我们休息一下.

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.

});

Answer 2

有些方法似乎很有趣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直到我们打开然后关闭重叠标记后，该事件才会被触发。如果我找到这个解决方案的结论，我将更新这篇文章。