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类来自己使用DrawingTools类，而不是使用绘图管理器/工具栏。您可以在编辑时将多边形传入编辑功能。也许当用户点击多边形时，进入编辑模式。然后，您可以决定如何在用户按下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 map

1 个答案: