Наложенные булавки на картах Bing — как отображать метаданные обоих или раздвигать булавки при определенном увеличении

Я создаю файл HTML/Javascript из базы данных Access365, который отображает контакты на карте Bing. С каждым булавкой связаны метаданные о местоположении, которое он закрепляет, которые можно просмотреть, щелкнув булавку. Однако могут быть контакты, которые находятся в одном и том же месте (широта и долгота), и доступны только метаданные для верхнего контакта.

Как показать комбинированные метаданные или сделать так, чтобы булавки немного раздвигались, скажем, когда пользователь наводит на них мышь? Кто-нибудь знает как это сделать? Я ходил по кругу, просматривая документацию MS, и не могу найти ничего, что могло бы помочь.

P.S. Также есть кластерный слой. Если это нужно удалить, чтобы решить проблему, это нормально, но было бы лучше, если бы это могло остаться.

<!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>

maps bing bing-maps pushpin
person HMcGoonish    schedule 30.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если у вас есть кластеры и вы хотите видеть отдельные метаданные для элементов в кластере, есть два распространенных подхода:

  1. Имейте всплывающее окно, которое показывает метаданные первого местоположения и кнопки для перехода/страницы/вкладки по каждому элементу в кластере.
  2. Используйте визуализацию кластера паука: https://bingmapsv8samples.azurewebsites.net/#Clustering_SpiderClusters.
person rbrundritt    schedule 09.11.2020
comment
Привет @rbrundritt. Спасибо за ваш ответ и ссылку. Мне нужно было закончить работу, прежде чем я увидел это, к сожалению, поэтому я добавил толчок к последующим булавкам на той же долготе и широте, просто переместив их по улице на несколько ярдов. Однако, если клиент попросит меня вернуться к этому, я обязательно последую вашей идее о кластере пауков, похоже, это было бы идеально! Спасибо! - person HMcGoonish; 10.11.2020