Bing 集群需要显示工具提示和弹出窗口

Question

需要在 bing 地图上显示标记束 (cluster) 标题。

我想显示 tooltip@hover 和 popup@click 和 cluster 有没有显示地图的选项。

我试过使用以下代码（但点击时没有 tooltip 和 popup）：

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'Your Bing Maps Key'
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer = new Microsoft.Maps.Layer();
layer.add(pushpin);
map.layers.insert(layer);

谢谢

Answer 1

您可以使用信息框 class 来执行此操作。幸运的是，我只是将样本放在一起来做到这一点。给你：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
            async defer></script>
    <script type='text/javascript'>
    var map, infobox, tooltip;
    var tooltipTemplate = '<div style="background-color:white;height:20px;width:150px;padding:5px;text-align:center"><b>{title}</b></div>';

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: Your Bing Maps Key'
        });

        //Create a second infobox to use as a tooltip when hovering.
        tooltip = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false,
            showPointer: false,
            showCloseButton: false,
            offset: new Microsoft.Maps.Point(-75, 10)
        });

        tooltip.setMap(map);

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



        //Create random locations in the map bounds.
        var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());

        for (var i = 0; i < randomLocations.length; i++) {
            var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);

            //Store some metadata with the pushpin.
            pin.metadata = {
                title: 'Pin ' + i,
                description: 'Discription for pin' + i
            };

            //Add a click event handler to the pushpin.
            Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
            Microsoft.Maps.Events.addHandler(pin, 'mouseover', pushpinHovered);
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip);

            //Add pushpin to the map.
            map.entities.push(pin);
        }
    }

    function pushpinClicked(e) {
        //Hide the tooltip
        closeTooltip();

        //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
            });
        }
    }

    function pushpinHovered(e) {
        //Hide the infobox
        infobox.setOptions({ visible: false });

        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            tooltip.setOptions({
                location: e.target.getLocation(),
                htmlContent: tooltipTemplate.replace('{title}', e.target.metadata.title),
                visible: true
            });
        }
    }

    function closeTooltip() {
        tooltip.setOptions({
            htmlContent: ' ',
            visible: false
        });
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Bing 集群需要显示工具提示和弹出窗口

Bing cluster need to display tooltip & popup

bing-maps

bing-api