Bing 地图上的叠加图钉 - 如何显示两者的元数据或以特定缩放将图钉分开

Question

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

Answer 1

当您有集群并且想要查看集群中项目的单个元数据时，有两种常用方法：

有一个弹出窗口显示集群中每个项目的第一个位置元数据和按钮 step/page/tab。
使用蜘蛛集群可视化：https://bingmapsv8samples.azurewebsites.net/#Clustering_SpiderClusters

Bing 地图上的叠加图钉 - 如何显示两者的元数据或以特定缩放将图钉分开

Superimposed Pins on Bing Maps - How to display metadata of both or move pins apart at a certain zoom

maps

bing-maps

bing

pushpin