Bing 地图 v8 JS API

Question

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

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

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

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

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

Answer 1

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

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

Bing 地图 v8 JS API

Bing Maps v8 JS API

javascript

bing

bing-maps