Bing Map Pushpin - 如何使用 Bing Maps V8 交互式 SDK 在 Bing Map 上添加带有自定义数据（坐标）的聚类层？答案

【问题标题】：Bing Map Pushpin - How to add clustering layer on Bing Map with custom data (co-ordinates) using Bing Maps V8 interactive SDK?Bing Map Pushpin - 如何使用 Bing Maps V8 交互式 SDK 在 Bing Map 上添加带有自定义数据（坐标）的聚类层？
【发布时间】：2017-07-24 15:35:01
【问题描述】：

我找到了一篇官方文章，其中显示了如何向地图添加聚类层，但该示例从 TestDataGenerator 函数中获取输入。我不知道如何传递我的信息以便地图将根据我的数据生成图钉。

Bing Map Official Article on "Add clustering layer to map"

<div id='printoutPanel'></div>
        <div id='myMap' style='width: 100vw; height: 100vh;'></div>
        <script type='text/javascript'>
            function loadMapScenario() {
                var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                    credentials: 'Your Bing Maps Key',
                    center: new Microsoft.Maps.Location(39.393486, -98.100769),
                    zoom: 3
                });
                Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
                    // Creating sample Pushpin data within map view
                    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
                    var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
                    map.layers.insert(clusterLayer);
                });
            }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>

如果有任何不清楚的地方，请访问上面的链接。

【问题讨论】：

标签： bing-api bing-maps

【解决方案1】：

测试数据生成器返回一个图钉数组。只需遍历您的自定义数据并创建一个图钉数组，然后将其传递到集群层。

【讨论】：

感谢您的回复。你能给我简单的代码，告诉我我可以在图钉数组中放入什么样的数据。我想使用经度和经度生成图钉。
有大量的示例和文档：bing.com/api/maps/sdkrelease/mapcontrol/…
不，没有大量的样本，事实上很少且重复。集群的唯一示例使用随机生成图钉，当尝试使其与自定义图钉一起工作时，我无法解决如何做到这一点。

【解决方案2】：

首先在您的页面中添加一个新的 id 和样式 display:none 向这个 div 添加一个gridview 将您的数据绑定到此网格视图

将数据绑定到地图的代码示例 - 适用于 ie - 最近开始在 Edge 和 Firefor 中遇到问题 - 适用于 Safari

问题似乎与尝试添加第二个集群层有关

评论赞赏

function loadMap() {
                var MaxLat = 0;
                var MinLon = 0;
                var MinLat = 0;
                var MaxLon = 0;
                var MLon = 0;
                var MLat = 0;
                var c;
                var Val2;
                var Val3;
                var Lat;
                var Lon;
                var Val1;
                var PPO;
                var Val4;
                var Val5;



                if (typeof GVBounds !== "undefined" && GVBounds !== null) {
                    var Mcell = GVBounds.rows[1].cells;
                    MaxLat = Mcell(0).innerHTML;
                    MinLon = Mcell(1).innerHTML;
                    MinLat = Mcell(2).innerHTML;
                    MaxLon = Mcell(3).innerHTML;
                    MLat = Mcell(4).innerHTML;
                    MLon = Mcell(5).innerHTML;
                }

                var map;
                var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
                var box = Microsoft.Maps.LocationRect.fromString(Rec);

                //var PPCDr = new Microsoft.Maps.Layer();
                //var PPCPU = new Microsoft.Maps.Layer();
                //var PPCD = new Microsoft.Maps.Layer();
                //var PPC = []
                var pinDr;
                var pinPU;
                var pinD;

                map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                    //center: new Microsoft.Maps.Location(MLat, MLon)
                }
                );

                Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {

                    var Pins = [];

                    Pins = GetPins();

                    //Create a ClusterLayer and add it to the map.
                    clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });

                    map.layers.insert(clusterLayer);
                });


                Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {

                    var DrPins = [];

                    DrPins = GetDrPins();

                    //Create a ClusterLayer and add it to the map.
                    DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });

                    map.layers.insert(DrclusterLayer);
                });

                map.setView({ bounds: box, padding: 20 });

            }

雷德

【讨论】：