Bing Maps v8 JS API

我有一个非常简单的Bing地图程序，我想让用户在地图上绘制一个图形，我已经绘制了绘图工具并设置了一切，但Bing的事件似乎并不火在正确的方式 -Bing Maps v8 JS API

图纸开始 - 火灾时，我改变我的绘图工具，无论是线或多边形

图纸变了 - 当我改变我的绘画工具火灾要么线或多边形

我只想从地图上清除现有的多边形，当我开始画一个新的多边形时 - 但是在t上调用getPrimitives函数他的绘图管理器清除了绘图模式，于是我考虑了缓存绘图模式，读取原始图像以删除它们，然后重新设置绘图模式，但是随后绘图管理器上的setDrawingMode方法再次调用绘图再次启动整个过程。

有谁知道如何解决这个问题。

来源

2017-05-05 Lee Francis Williams

单击模式时绘图启动事件触发看起来很奇怪。将让团队研究这一点。

但是，你正在尝试的待办事项会有一些潜在的问题。如果在用户开始在地图上绘制多边形时清除绘图管理器，该多边形也将从地图中移除。你可以做的是完成绘制多边形，将其移动到一个单独的图层，然后你可以清除该图层而不影响绘图管理器。如果您只想绘制多边形，您甚至不需要绘图管理器，因为您可以使用绘图工具和一个按钮自己处理它。例如：http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CreateShape

下面是一个代码示例，达到您所使用的描绘管理求的是什么：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript'> 
    var map, baseLayer, drawingManager; 

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

     //Load the DrawingTools module 
     Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function() { 
      //Create a base layer to add drawn shapes. 
      baseLayer = new Microsoft.Maps.Layer(); 
      map.layers.insert(baseLayer); 

      //Create an instance of the DrawingTools class and bind it to the map. 
      var tools = new Microsoft.Maps.DrawingTools(map); 

      //Show the drawing toolbar and enable editting on the map. 
      tools.showDrawingManager(function (manager) { 
       drawingManager = manager; 

       Microsoft.Maps.Events.addHandler(drawingManager, 'drawingEnded', function (e) { 
        //When use finisihes drawing a shape, removing it from the drawing layer and add it to the base layer. 
        var shapes = drawingManager.getPrimitives(); 

        if (shapes) { 
         drawingManager.clear(); 
         baseLayer.add(shapes); 
        } 
       }); 

       Microsoft.Maps.Events.addHandler(drawingManager, 'drawingChanging', function (e) { 
        //When the drawing is changing, clear the base layer. 
        baseLayer.clear(); 
       }); 
      }) 
     }); 
    } 
    </script> 
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div> 
</body> 
</html>

下面是一个类似的代码示例，这是否不绘图经理和一个自定义的按钮启动绘制一个多边形。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript'> 
    var map, baseLayer, tools, currentShape; 

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

     //Create a base layer to add drawn shapes. 
     baseLayer = new Microsoft.Maps.Layer(); 
     map.layers.insert(baseLayer); 

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

      Microsoft.Maps.Events.addHandler(tools, 'drawingChanging', function (e) { 
       //When the drawing is changing, clear the base layer. 
       baseLayer.clear(); 
      }); 


      //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(shapeDrawn); 
        currentShape = null; 
       } 
      }; 
     }); 
    } 

    function drawPolygon() { 
     //Stop any current drawing. 
     if (currentShape) { 
      tools.finish(shapeDrawn); 
      currentShape = null; 
     } 

     //Create a new polygon. 
     tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) { 
      currentShape = s; 
     }); 
    } 

    function shapeDrawn(s) { 
     baseLayer.add(s); 
    } 
    </script> 
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div><br /> 
    <input type="button" onclick="drawPolygon()" value="Draw Polygon" /> 
</body> 
</html>

来源

2017-05-05 16:38:06 rbrundritt

谢谢你，我现在正在使用这个实现。 –

Bing Maps v8 JS API

回答

相关问题