Question

在V7 Bing地图中，您提供了在下面链接的聚类地图中定制添加图钉和信息框的功能

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

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

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

您能否在群集地图中提供图钉和信息框的示例代码？

提前致谢

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;

    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>

Answer 2

对于单个图钉，您可以在将它们添加到聚类图层之前对其进行自定义，并且聚类图层将只渲染它们。不需要像旧的v7模块那样的回调。在自定义群集图钉时仍会使用回调。

对于信息框，只需在图钉和群集中添加点击事件，当事件触发时，您可以加载信息框。这很简单。此外，您只需在应用中使用一个信息框，只需根据点击内容更新内容即可。

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

如何在V8模块中的群集映射中设置自定义图钉和信息框

2 个答案: