当同一位置有多个标记时，重叠标记Spiderfier标记图标 [英] Overlapping Marker Spiderfier Marker Icon When There are Multiple Markers at Same Location

问题描述

Google地图不提供分离处于相同位置的多个标记的方法。这可能发生在多个居住地点的人员或企业，如公寓楼或专业服务楼。根据缩放级别，它也可以出现在商场等。

解决方法是spiderfy他们：当点击第一个时，到该位置的一条线。这是在谷歌地球完成的，George MacKerron为谷歌地图编写了一个包。 （ https://github.com/jawj/OverlappingMarkerSpiderfier ）

它可以与markerclusterer集成，尽管它不支持标记群集器的批量创建标记。

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

理想情况下，有一种方法可以放置顶部标记，当有多个标记与markercluster中的不同图标相似时，该顶部标记将显示。它不是直接的1比1，因为spiderfier在关闭时也可以工作，但不完全在同一位置（默认为20像素），并且markercluster没有提供在完全相同的位置访问多个标记的规定。

理想的行为是为蜘蛛提供一个特殊的图标，当点击时它会突破单个图标。与markerclusterer类似，但没有缩放更改并处理相同的位置。理想情况下，特殊图标会指示该点上还有多少其他标记，就像markerclusterer一样。特殊的图标可能被隐藏或成为spiderfied组的一部分。

如果没有住宿，用户将无法知道在该地点有多个活动。他们甚至可以假设他们想要的活动不在该位置，因为显示了另一个活动标记。

这是一个有问题的蹲跳者：http://plnkr.co/edit/vimZNq?p=info

  var markers = []; 
 var bounds = new google.maps.LatLngBounds（）; （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）; 
  

感谢您的帮助，

David

解决方案

以下是我如何运作的。其中 map 是一个Gmap实例， oms 是一个重叠标记Spiderfier实例。我们还在初始缩放上使用了Marker Clusterer，它为我们带来了一次休息。

  map.addListener（'zoom_changed'，function （）{
 
 map.addListenerOnce（'idle'，function（）{
 
 //将spiderable标记更改为加号标记
 //我们很幸运在该初始映射完全聚集
 //因为在oms中没有init监听器:( 
 //所以我们交换第一个缩放/空闲
 //以及随后的任何其他缩放/闲置
 
 var spidered = oms.markersNearAnyOtherMarker（）; 
 
 for（var i = 0; i< spidered.length; i ++）{
 
 //这是在我们创建标记时设置的
 url = spidered [i] .icon.url; 
 
 //用于操纵蜘蛛图标的代码url 
} ; 
 
））; 
 
}）; 
 
 
 oms.addListener（'unspiderfy'，函数（标记）{
 
 var spidered = marker s; 
 
（var i = 0;我< spidered.length; i ++）{
 
 url = spidered [i] .icon.url; 
 
 //将其改回
}; 
}）; 
 
 
 oms.addListener（'click'，function（marker）{
 
 //将点击标记置于
上方//当oms un-spiders 
 
 marker.zIndex = 999; 
 
 //设置infowindow，平移等
 
}）; 
  

Google Maps doesn't provide a way to break apart multiple markers that are at the same location. This can occur with a people or businesses at a multiple residency location such as an apartment building or professional services building. Depending at zoom level it can also occur at shopping malls, etc.

The way around that is to "spiderfy" them: when clicking on the first it breaks them out with a line to the location. This is done in Google Earth and George MacKerron wrote a package to do that for Google Maps. (https://github.com/jawj/OverlappingMarkerSpiderfier)

It can be integrated with markerclusterer, although it doesn't support marker clusterer's batch creation of markers.

My issue is that the application I'm working on wants to have specific icons for different types of activities. Spiderfier puts one of the markers on top. A person looking at the map has no way of knowing that there can be 10 or more other markers underneath the top marker.

Ideally, there would be a way to put a top marker that displays when there are multiple markers similar to the different icon in markercluster. It isn't a direct 1-to-1 since spiderfier also works when they are close but not exactly at the same location (default is 20 pixels) and markercluster has no provision for accessing multiple markers at the exact same location.

The ideal behavior would be have a special icon for spiders that broke into the spiderfied individual icons when clicked. Similar to markerclusterer, but without the zoom change and handling the same location. The special icon ideally would indicate how many other markers are at the spot, again like markerclusterer. The special icon could be hidden or become part of the spiderfied group.

Without some accommodation users would have no way of knowing multiple activities are at the location. They may even assume that the activity they want is not at that location because another activities marker is shown.

This is a plunker that has the problem: 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);

Thanks for your help,

David

解决方案

Here's how I got it to work. Where map is a Gmap instance and oms is an Overlapping Marker Spiderfier instance. We're also using Marker Clusterer on the initial zoom which buys us a break.

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.

});

这篇关于当同一位置有多个标记时，重叠标记Spiderfier标记图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！