gpt4 book ai didi

javascript - 必应 map v8 JS API

转载 作者:行者123 更新时间:2023-11-29 19:04:46 27 4
gpt4 key购买 nike

我有一个非常简单的 Bing map 程序,我想让用户在 map 上绘制一个形状,我有绘图工具和所有设置,但是 Bing 的事件似乎没有以正确的方式触发-

绘图开始 - 当我将绘图工具更改为直线或多边形时触发

绘图已更改 - 当我将绘图工具更改为直线或多边形时触发

当我开始绘制一个新的多边形时,我只是想从 map 上清除现有的多边形 - 但是在绘图管理器上调用 getPrimitives 函数会清除绘图模式,所以我想到了缓存绘图模式,读取图元以删除它们,然后重置绘图模式,然后绘图管理器上的 setDrawingMode 方法再次调用绘图开始,这再次触发了整个过程。

有谁知道如何克服这个问题。

最佳答案

当您单击该模式时,绘图开始事件正在触发,这看起来确实很奇怪。会让团队对此进行调查。

但是,您尝试做的事情会有一些潜在的问题。如果在用户开始在 map 上绘制多边形时清除绘图管理器,则该多边形也将从 map 中删除。您可以做的是在完成绘制多边形后,将其移动到单独的图层,然后您可以清除该图层而不影响绘图管理器。如果您只对绘制多边形感兴趣,您甚至不需要绘图管理器,因为您可以使用绘图工具和按钮自行处理。例如: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>

关于javascript - 必应 map v8 JS API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43803421/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com