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