如何在Google地图上删除绘制的多边形

穆罕默德·克曼尼(Mohammad Kermani)

我有一个地图,使用ng-map指令,还有一个<drawing-manager>允许我在地图上绘制形状的地图。

我只想允许我的用户在地图上绘制一个多边形,这是我的HTML:

<div ng-controller="CreateOrderController as vm" map-lazy-load="https://maps.google.com/maps/api/js"
         map-lazy-load-params="{{googleMapsUrl}}">
        <ng-map zoom="4" center="33.134394, 53.664248"
                map-type-id="ROADMAP">
            <drawing-manager
                    on-overlaycomplete="vm.onMapOverlayCompleted()"
                    drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
                    drawingControl="true"
                    drawingMode="null">
            </drawing-manager>
        </ng-map>
    </div>

这是我的控制器:

var vm = this;


$scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=myKeyIsHere&sensor=false&libraries=drawing";
    NgMap.getMap().then(function(map) {
        vm.map = map;
});


vm.onMapOverlayCompleted = function(e){
    var shapePath=e.overlay.getPath().getArray();  //This returns an array of drawn polygon cordinates

    //Just for example, here I want to delete the drawn polygon:
    $scope.deletePolygon();
};


$scope.deletePolygon = function() {
    //According to Google's docs: https://developers.google.com/maps/documentation/javascript/examples/polyline-remove
    vm.map.setMap(null);
};

deletePolygon函数返回错误:

未捕获的TypeError:vm.map.setMap不是函数

我知道地图对象不包含setMap函数,但是Google文档说我可以使用以下方法删除多边形形状setMap(null)

关于如何删除/删除多边形的任何想法?

Matej P.

overlaycomplete事件的回调函数传递一个类型为type的参数google.maps.drawing.OverlayCompleteEvent,根据文档,该overlay参数具有引用新创建的对象的参数。您需要调用.setMap(null)该对象。因此,您的代码应如下所示:

vm.onMapOverlayCompleted = function(e){
    var shapePath= e.overlay.getPath().getArray();  //This returns an array of drawn polygon cordinates

    e.overlay.setMap(null); //this will delete any created shape (polygon, polyline, etc) right after it is created. If you want to instead delete it later, just store the reference to overlay and call setMap(null) on it later.
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Google地图上绘制多边形

无法在Google地图上绘制多边形

如何在Google地图上以距用户输入点已定义的距离(米)绘制多边形(矩形)

如何在Angular中的地图上动态绘制多边形的形状

如何将数据库中存储的多边形绘制到Google地图上

如何使用Array中的坐标在Google地图上绘制多边形

如何从谷歌地图上完全删除圆,多边形

如何在地图上添加多边形

如何从Google地图中删除多边形

ggmap包在地图上绘制填充的多边形

如何使用绘图管理器从Google地图中删除绘制的圆形或多边形-ng2-map

Google地图绘制多边形并删除前一个

使用Google地图在多边形内绘制较小的多边形

无法在Google地图中绘制多边形

使用JavaScript在Google地图中绘制多边形

如何在Android的Google地图上绘制自由手形

如何在谷歌地图中使用latlng的字符串数组绘制多边形

如何从谷歌地图中删除多边形

HTTP请求后Android在谷歌地图上绘制多边形

使用时间滑块在地图上绘制多边形 + 时间戳

如何使用带有derby数据库的jsf在Google地图上动态创建多边形?

如何在Google地图的彩色多边形上显示街道号码?

如何在Vue中保存Google地图编辑的多边形路径

如何在Google地图片段Android Studio中导入KML多边形文件

GoogleMaps:如何在单个Google地图中具有多边形和标记

如何在地图中显示多个多边形

如何在Android应用中绘制类似于Google Map的多边形?

如何在Scatter Series Google图表上绘制自定义多边形?

如何在PDFBOX中绘制填充的多边形?