我有一个非常简单的 Bing 地图程序，我想允许用户在地图上绘制一个形状，我已经设置了绘图工具和所有东西，但是 Bing 的事件似乎没有以正确的方式触发-
绘图开始 - 当我将绘图工具更改为线或多边形时触发
Drawing Changed - 当我将绘图工具更改为直线或多边形时触发
我只是想在开始绘制新多边形时从地图中清除现有多边形 - 但是在绘图管理器上调用 getPrimitives 函数会清除绘图模式，所以我想到了缓存绘图模式，读取图元将其删除，然后重置绘图模式，但绘图管理器上的 setDrawingMode 方法再次调用绘图开始，再次触发整个过程。
有谁知道如何克服这个问题。
【问题讨论】：
标签： javascript bing bing-maps
当您单击该模式时触发绘图开始事件看起来很奇怪。将让团队对此进行调查。
但是，您尝试执行的操作可能存在一些潜在问题。如果在用户开始在地图上绘制多边形时清除绘图管理器，该多边形也将从地图中删除。您可以做的是在完成绘制多边形后，将其移动到单独的图层，然后您可以清除该图层而不影响绘图管理器。如果您只对绘制多边形感兴趣，您甚至不需要绘图管理器，因为您可以使用绘图工具和按钮自行处理。例如：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>
【讨论】：