想要在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地圖上添加多邊形點擊事件

回答

相關問題