Fatal编程技术网

Javascript Bing映射v8 JS API

javascript

Javascript Bing映射v8 JS API,javascript,bing,bing-maps,Javascript,Bing,Bing Maps,我有一个非常简单的Bing地图程序，我想让用户在地图上绘制一个形状，我已经设置了绘图工具和所有设置，但是Bing的事件似乎没有以正确的方式触发- 绘图开始-将绘图工具更改为直线或多边形时激发 绘图已更改-将绘图工具更改为直线或多边形时激发 我只想在开始绘制新多边形时从地图中清除现有多边形-但是调用绘图管理器上的getPrimitives函数会清除绘图模式，因此我考虑缓存绘图模式，读取原语以删除它们，然后重置图形模式，但图形管理器上的setDrawingMode方法会调用重新启动的图形，从而再次触

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

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

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

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

有人知道如何克服这个问题吗

当您单击该模式时，启动“绘图启动”事件看起来确实很奇怪。我会让团队调查的

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

下面是一个代码示例，它实现了使用图形管理器所要求的功能：

<!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>


var映射、baseLayer、drawingManager；
函数GetMap（）{
map=new Microsoft.Maps.map（“#myMap”{
凭证：“YourBingMapsKey”
});
//加载DrawingTools模块
Microsoft.Maps.loadModule（'Microsoft.Maps.DrawingTools'，函数（）{
//创建基础层以添加绘制的形状。
baseLayer=新的Microsoft.Maps.Layer（）；
map.layers.insert（baseLayer）；
//创建DrawingTools类的实例并将其绑定到地图。
var tools=new Microsoft.Maps.DrawingTools（map）；
//显示绘图工具栏并在地图上启用编辑。
工具。showDrawingManager（功能（管理器）{
drawingManager=经理；
Microsoft.Maps.Events.addHandler（drawingManager，'drawingEnded'，函数（e）{
//使用Finishes绘制形状时，将其从绘图层中删除并添加到基础层。
var shapes=drawingManager.getPrimitives（）；
如果（形状）{
drawingManager.clear（）；
添加（形状）；
}
});
Microsoft.Maps.Events.addHandler（drawingManager，'DrawingChangeing'，函数（e）{
//更改图形时，请清除基础图层。
baseLayer.clear（）；
});
})
});
}
下面是一个类似的代码示例，它不使用图形管理器和自定义按钮来开始绘制多边形

<!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>


var映射、基本层、工具、currentShape；
函数GetMap（）{
map=new Microsoft.Maps.map（“#myMap”{
凭证：“YourBingMapsKey”
});
//创建基础层以添加绘制的形状。
baseLayer=新的Microsoft.Maps.Layer（）；
map.layers.insert（baseLayer）；
//加载DrawingTools模块。
Microsoft.Maps.loadModule（'Microsoft.Maps.DrawingTools'，函数（）{
//创建DrawingTools类的实例并将其绑定到地图。
工具=新的Microsoft.Maps.DrawingTools（地图）；
Microsoft.Maps.Events.addHandler（工具，'DrawingChangeing'，函数（e）{
//更改图形时，请清除基础图层。
baseLayer.clear（）；
});
//当用户按下“esc”键时，将多边形从编辑模式中取出并重新添加到底图。
document.getElementById（'myMap'）。onkeypress=函数（e）{
如果（e.charCode===27）{
工具。表面处理（成形图纸）；
currentShape=null；
}
};
});
}
函数drawPolygon（）{
//停止任何当前图形。
如果（当前形状）{
工具。表面处理（成形图纸）；
currentShape=null；
}
//创建一个新多边形。
创建（Microsoft.Maps.DrawingTools.ShapeType.polygon，函数）{
currentShape=s；
});
}
函数形状箭头（s）{
基层。添加（s）；
}
谢谢，我现在正在使用这个实现。