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

-2

我想用绘图管理器绘制多边形，因为我也想编辑它们。问题是，一旦我点击多边形，它不会显示警告消息。似乎点击事件没有被解雇。想要在bing地图上添加多边形点击事件

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); 
}); 
});

来源

2016-09-20 Yashpal S

问题是什么？描述你想要的结果和问题 –

一旦我点击多边形，它不会显示警告消息。似乎点击事件没有被解雇。请帮助 –

我有使用多边形的点击事件。当我使用绘图管理器绑定多边形时，它不起作用。 –

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

由于这些是已定义的形状，因此您可以使用绘图管理器/工具栏而不是绘图管理器/工具栏进行操作，因此使用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>

来源

2016-09-21 20:25:56 rbrundritt

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

回答

相关问题