Question

我找到了一篇官方文章，其中显示了如何将聚类图层添加到Map，但该示例从 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>

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

Answer 1

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

Answer 2

首先向您的页面添加ID和样式显示为新内容：无向此div添加gridview 将数据绑定到此gridview

将数据绑定到地图的代码示例-适用于-即最近开始在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 });

            }

RayD

Bing Map Pushpin - 如何使用Bing Maps V8交互式SDK在Bing Map上添加自定义数据（坐标）的群集层？

2 个答案: