必应地图上的叠加图钉-如何显示两者的元数据或以一定的缩放比例将图钉分开

问题描述

我正在从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

bing bing-maps pushpin