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

Question

我有一张地图,使用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)

有关如何删除/删除多边形形状的任何想法？

Answer 1

overlaycomplete事件的回调函数传递一个类型的参数google.maps.drawing.OverlayCompleteEvent,根据docs有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.
};