Bing 地图集群图钉点击

Question

我有一张带有集群图钉的地图，我想制作它以便单击集群图钉可以缩放该区域的地图。我正在使用 webAPI 并为各个引脚设置了点击处理程序。有什么方法可以为群集图钉设置点击处理程序吗？

Answer 1

是的，这很容易做到。集群模块允许您传入一个回调函数，该函数可用于自定义集群图钉。在这个回调函数中你可以给clustered pin添加一个点击事件。当该事件被触发时，您可以获取集群中的所有图钉并为它们计算一个边界框，以便它们将地图缩放到该区域。请注意，某些图钉在放大后可能仍处于簇中。这是一个代码示例：

<!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) {
        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 地图集群图钉点击

Bing Maps cluster pushpin click

javascript

bing-maps