如何解决必应地图上的叠加图钉-如何显示两者的元数据或以一定的缩放比例将图钉分开
我正在从Access365数据库生成HTML / Javascript文件，该文件在Bing地图上绘制了引脚。每个图钉都有有关其钉扎位置的相关元数据，可通过单击图钉查看该图钉。但是，可能有一些销钉位于完全相同的位置（经纬度），只有顶部销钉的元数据可用。
当用户将鼠标悬停在元数据上时，如何显示合并的元数据或使销分开一点？有谁知道这是怎么做到的吗？我到处都是MS文档，但是找不到任何帮助。
P.S。还有一个clusterLayer。如果需要删除以解决问题就可以了，但是如果可以解决，那就更好了。
<!DOCTYPE html>
<html>
<head>
<title></title>
<Meta charset="utf-8" />
<!-- Reference to the Bing Maps SDK -->
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[zzz]'
async defer></script>
<script type='text/javascript'>
function GetMap()
{
var map = new Microsoft.Maps.Map('#myMap',{center: new Microsoft.Maps.Location(53.50632,-7.2714),zoom:8});
var ourBlue = 'rgb(108,162,212)';
//Create an infoBox at the center of the map but don't show it.
infoBox = new Microsoft.Maps.InfoBox(map.getCenter(),{
visible: false
});
//Assign the infoBox to a map instance.
infoBox.setMap(map);
var theLocations = [3];
var thePins = [3];
theLocations[0] = new Microsoft.Maps.Location(53.41,-7.1);
theLocations[1] = new Microsoft.Maps.Location(53.42,-7.1);
theLocations[2] = new Microsoft.Maps.Location(53.43,-7.1);
for (var i = 0; i < theLocations.length; i++){
var pin = new Microsoft.Maps.pushpin(theLocations[i]);
pin.Metadata = {
title: 'Pin ' + i,description: 'Description for pin' + i
};
Microsoft.Maps.Events.addHandler(pin,'click',pushpinClicked);
Microsoft.Maps.Events.addHandler(pin,'mouSEOver',splitOverlap);
Microsoft.Maps.Events.addHandler(pin,'mouSEOut',function (e) {
e.target.setoptions({ color:'purple' });
});
thePins[i] = pin; //add pin to array of pins
}
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering",function(){
clusterLayer = new Microsoft.Maps.ClusterLayer(thePins);
map.layers.insert(clusterLayer);
});
}
function splitOverlap(e) {
var ourBlue = 'rgb(108,212)';
e.target.setoptions({color:ourBlue});
}
}
function pushpinClicked(e) {
//Make sure the infoBox has Metadata to display.
if (e.target.Metadata) {
//Set the infoBox options with the Metadata of the pushpin.
infoBox.setoptions({
location: e.target.getLocation(),title: e.target.Metadata.title,description: e.target.Metadata.description,visible: true
});
}
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=Arvr3LDJsmNB-2OGHl_egpbP9RbwsYKGKrktnPBC06G38T9q3CzsfmwK6GNow7R_' async defer></script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
解决方法
当您有聚类并且想要查看聚类中项目的单个元数据时，有两种常用方法：
- 具有一个弹出窗口，其中显示了第一个位置元数据和用于逐步/页面/选项卡浏览集群中每个项目的按钮。
- 使用蜘蛛群集可视化：https://bingmapsv8samples.azurewebsites.net/#Clustering_SpiderClusters
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。