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

需要在必应地图上显示标记束（ 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);

谢谢

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

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

相关内容

最新更新

热门标签：