javascript - 对于 Angular 谷歌地图，我如何删除多段线？

Question

对于 Angular 谷歌地图，我该如何删除多段线？我在使用 templateUrl 的指令中使用带有 JavaScript 的 Angular 版本 1。

版本:angular-google-maps 2.1.5

这是我当前的 HTML:

 <ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">
        <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="false" visible="polygonConfig.visible" editable="true" draggable="true" clickable="true" events="polygonConfig.events">
        </ui-gmap-polygon>

        <ui-gmap-markers coords="'self'" options="marker.options" models="compatiblePoints" idkey="'id'" clickable="true" click="markerClicked">
        </ui-gmap-markers>

        <ui-gmap-drawing-manager options="drawingManager" static="false" events="config.drawing.events">
        </ui-gmap-drawing-manager>
    </ui-gmap-google-map>

这是我需要删除的绘制折线的 img:

到目前为止，我已经通过点击我的清除 map 按钮尝试了这个:

scope.polygonConfig.events.setMap(null);

但我随后收到此控制台错误:

“无法读取未定义的属性‘setMap’”

我也试过这个:

                   uiGmapIsReady.promise(1).then(function (instances) {
                        const map = instances.reduce(function(previous, current) {
                            return current.map;
                        });
                        scope.mapInstance = map;
                        map.setMap(null);
                    });

但我得到这个错误:map.setMap 不是一个函数

这是我最近的尝试:

              <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonManager.events">
              </ui-gmap-polygon>


                scope.polygonManager = {
                    events: {
                        rightclick: function(polygon) {
                          console.log("rightclick");
                          polygon.setMap(null);
                        },
                        dblclick: function(polygon) {
                          console.log("dblclick");
                          polygon.setMap(null);
                        }
                    }
                };

Answer 1

基于 ui-gmap-polygon 的文档:

events: Custom events to apply to the Polygon. This is an associative array, where keys are event names and values are handler functions. See Polygon events. The handler function takes four parameters (note the args are expanding on the original google sdk's default args):

1. Polygon: the GoogleMaps Polygon object

您可以使用 ui-gmap-polygon 的 events 属性清除折线，如下所示:

$scope.events = {
    rightclick: function(polygon) {
        polygon.setMap(null);
    }
};

<ui-gmap-polygon ... events="events"></ui-gmap-polygon>

这将导致右键单击以从 map 中删除多边形。您还可以使用其他事件来触发此事件，它们在此处列出:https://developers.google.com/maps/documentation/javascript/reference#Polygon
查看事件部分

编辑:这是一个演示此功能的示例:http://plnkr.co/edit/t7zz8e6mCJavanWf9wCC?p=info