想要在 bing 地图中的多边形上添加点击事件

Question

我想使用绘图管理器绘制多边形，因为我还想编辑它们。问题是，一旦我点击多边形，它就不会显示警告消息。似乎没有触发点击事件。

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
var center = map.getCenter();
var nose = new Microsoft.Maps.Pushpin(center, null);
var polygon1 = new Microsoft.Maps.Polygon([
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.03),
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.11),
    new Microsoft.Maps.Location(center.latitude + 0.05, center.longitude - 0.07)
]);
Microsoft.Maps.Events.addHandler(polygon1, 'click', function () { alert('polygonClick1'); });
var polygon2 = new Microsoft.Maps.Polygon([
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.03),
    new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.11),
    new Microsoft.Maps.Location(center.latitude + 0.05, center.longitude + 0.07)
]);
Microsoft.Maps.Events.addHandler(polygon2, 'click', function () { alert('polygonClick2'); });
var mouth = new Microsoft.Maps.Polyline([
    new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude - 0.10),
    new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.07),
    new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude + 0.07),
    new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude + 0.10)
]);
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
var tools = new Microsoft.Maps.DrawingTools(map);
    tools.showDrawingManager(function (manager) {
    manager.setPrimitives([mouth]);
    manager.add(polygon1);
    manager.add(polygon2);
    manager.add(nose);
});
});

Answer 1

这是意料之中的，因为您将多边形添加到绘图管理器而不是地图。绘图管理器处理使用所有鼠标事件进行编辑和绘图，并且不允许将任何自定义事件添加到形状。绘图管理器本身有许多事件，您可以按照此处的说明使用这些事件：https://msdn.microsoft.com/en-us/library/mt750462.aspx

由于这些是已经定义的形状，您可以单独使用 DrawingTools class 而不是使用绘图 manager/toolbar。当你想编辑它时，你可以将多边形传递给编辑功能。也许当用户点击多边形时，进入编辑模式。然后你可以决定你希望编辑如何停止，也许当用户按下 esc 键时。这是一个代码示例，展示了如何执行此操作：

<!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;
    var tools;

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

        //Load the DrawingTools module.
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            tools = new Microsoft.Maps.DrawingTools(map);
        });

        //Create a random 5 sided polyogn that fills a decent portion of the map.
        var polygon = Microsoft.Maps.TestDataGenerator.getPolygons(1, map.getBounds(), 5, 0.8);
        map.entities.push(polygon);

        //When the polygon is clicked, go into edit mode.
        Microsoft.Maps.Events.addHandler(polygon, 'click', function () {
            //Remove the polygon from the map as the drawing tools will display it in the drawing layer.
            map.entities.remove(polygon);

            //Pass the polygon to the drawing tools to be edited.
            tools.edit(polygon);
        });

        //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
        document.getElementById('myMap').onkeypress = function (e) {
            if (e.charCode === 27) {
                tools.finish(function (s) {
                    map.entities.push(s);
                });
            }
        };
    }
    </script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

想要在 bing 地图中的多边形上添加点击事件

Want to add click event on polygon in bing map

javascript

bing-maps