Bing Maps v8 JS API
问题描述:
我有一个非常简单的Bing地图程序,我想让用户在地图上绘制一个图形,我已经绘制了绘图工具并设置了一切,但Bing的事件似乎并不火在正确的方式 -Bing Maps v8 JS API
图纸开始 - 火灾时,我改变我的绘图工具,无论是线或多边形
图纸变了 - 当我改变我的绘画工具火灾要么线或多边形
我只想从地图上清除现有的多边形,当我开始画一个新的多边形时 - 但是在t上调用getPrimitives函数他的绘图管理器清除了绘图模式,于是我考虑了缓存绘图模式,读取原始图像以删除它们,然后重新设置绘图模式,但是随后绘图管理器上的setDrawingMode方法再次调用绘图再次启动整个过程。
有谁知道如何解决这个问题。
答
单击模式时绘图启动事件触发看起来很奇怪。将让团队研究这一点。
但是,你正在尝试的待办事项会有一些潜在的问题。如果在用户开始在地图上绘制多边形时清除绘图管理器,该多边形也将从地图中移除。你可以做的是完成绘制多边形,将其移动到一个单独的图层,然后你可以清除该图层而不影响绘图管理器。如果您只想绘制多边形,您甚至不需要绘图管理器,因为您可以使用绘图工具和一个按钮自己处理它。例如: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>
谢谢你,我现在正在使用这个实现。 –