Question

需要在bing map上显示标记束（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

您可以使用信息框类来执行此操作。幸运的是，我只是把样本放在一起做这件事。你走了：

<!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集群需要显示工具提示＆amp;弹出

1 个答案: