个人中心
gpt4 book ai didi

maps - Bing Map V8 Cluster 传递实时数据

转载 作者：行者123 更新时间：2023-12-01 01:08:32 24 4
gpt4 key购买 nike

我刚刚开始使用 Bing map 。浏览了官方文档中的几个示例。

示例来自 Bing map V8 official documentation 

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

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

        Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
            //Generate 3000 random pushpins in the map view.
            var pins = Microsoft.Maps.TestDataGenerator.getPushpins(3000, map.getBounds());

            //Create a ClusterLayer with options and add it to the map.
            clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
                clusteredPinCallback: customizeClusteredPin
            });
            map.layers.insert(clusterLayer);
        });
    }

    function customizeClusteredPin(cluster) {
           //Add click event to clustered pushpin
        Microsoft.Maps.Events.addHandler(cluster, 'click', clusterClicked);
    }

    function clusterClicked(e) {
        if (e.target.containedPushpins) {
            var locs = [];
            for (var i = 0, len = e.target.containedPushpins.length; i < len; i++) {
                //Get the location of each pushpin.
                locs.push(e.target.containedPushpins[i].getLocation());
            }

            //Create a bounding box for the pushpins.
            var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);

            //Zoom into the bounding box of the cluster. 
            //Add a padding to compensate for the pixel area of the pushpins.
            map.setView({ bounds: bounds, padding: 100 });
        }
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

在上面的 bing map 集群示例中，如何将 TestDataGenerator 数据替换为实时数据 JSON，如下所示

    mapData = [{"Name":"Point: 0","Latitude":22.0827,"Longitude":80.2707},
               {"Name":"Point: 1","Latitude":24.0827,"Longitude":80.2707},
               {"Name":"Point: 2","Latitude":26.0827,"Longitude":80.2707},
               {"Name":"Point: 3","Latitude":28.0827,"Longitude":80.2707},
               {"Name":"Point: 4","Latitude":20.0827,"Longitude":80.2707},
               {"Name":"Point: 5","Latitude":22.0827,"Longitude":82.2707},
               {"Name":"Point: 6","Latitude":30.0827,"Longitude":80.2707},
               {"Name":"Point: 7","Latitude":22.0827,"Longitude":84.2707},
               {"Name":"Point: 8","Latitude":32.0827,"Longitude":84.2707},
               {"Name":"Point: 9","Latitude":18.0827,"Longitude":80.2707}];

当我在 ClusterLayer 中传递上述对象时，出现以下错误

Uncaught TypeError: i[t].getLocation is not a function(…)

最佳答案

您必须遍历数据并将其转换为图钉。这是一个代码示例:

var pins = [];

for(var i = 0;i < mapData.length;i++){
    var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapData[i].Latitude, mapData[i].Longitude));

    //Store the original data object in the pushpins metadata so that you can access other properties like Name.
    pin.metedata = mapData[i];

    pins.push(pin);
}

//Now "pins" is an array of pushpins. Add them to the map or to the clustering layer.

关于maps - Bing Map V8 Cluster 传递实时数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40909225/

24 4 0
文章推荐： python - 在 python 中使用 while 检查错误
文章推荐： python - Pymysql DictCursor 返回列表而不是字典
文章推荐： python - pandas groupby 计数共存
文章推荐： jquery - jqgrid中如何删除行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com