如何在 V8 模块的聚类图中设置自定义图钉和信息框

Question

在 V7 Bing 地图中，您提供了在下面 link

的聚类地图中自定义添加图钉和信息框的功能

https://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule3

但是在 V8 中 bing map Microsoft 没有提供如何在聚类地图中设置图钉和信息框。

http://www.bing.com/api/maps/sdk/mapcontrol/isdk#clusteringMeanAverage+TS

能否提供聚类图中图钉和信息框的示例代码？

提前致谢

Answer 1

对于单个图钉，您可以在将它们添加到聚类层之前自定义它们，聚类层将简单地呈现它们。不需要像旧的 v7 模块那样的回调。自定义群集图钉时仍会使用回调。

对于信息框，只需将点击事件添加到图钉和群集，当事件触发时，您可以加载信息框。这真的很简单。此外，您在应用程序中只需要一个信息框，并根据点击的内容简单地更新它的内容。

完整的文档也可以在这里找到：https://msdn.microsoft.com/en-us/library/mt712542.aspx

Answer 2

下面是一个示例，说明如何使用元数据属性通过图钉存储数据并向图钉添加点击事件以打开信息框：

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

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

        //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 a pushpin in the at a random location in the map bounds.
        var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
        var pin = new Microsoft.Maps.Pushpin(randomLocation);

        //Store some metadata with the pushpin.
        pin.metadata = {
            title: 'Pin Title',
            description: 'Pin discription'
        };

        //Add an click event handler to the pushpin.
        Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

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

    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>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

如何在 V8 模块的聚类图中设置自定义图钉和信息框

How can i set custom pushpin and infobox in clustering map in V8 Module

bing-maps

bing-api