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

回答

相關問題