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 docs表示我可以使用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.
};

Answer 2

试试这个，clearMap（）将从地图中删除所有多边形，圆形，直线

        NgMap.getMap({id: 'mapId'}).then(function (map) {
            $scope.map = map;
        }).catch(function (map) {
            console.error('map error: ', map);
        });

        $scope.onMapOverlayCompleted = onMapOverlayCompleted;
       $scope.clearMap = clearMap;

       function onMapOverlayCompleted(e) {
            $scope.map = e;
       }

       function clearMap() {
            if ($scope.map.overlay) {
                $scope.map.overlay.setMap(null);
            }
        }

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

2 个答案: