对于 angular google 地图，我该如何删除多段线？

Question

对于 angular google 地图，我该如何删除多段线？我在使用 templateUrl 的指令中使用 angular 版本 1 和 JavaScript。

版本：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>

这是我需要删除的折线图：

到目前为止，我已经尝试过点击我的清除地图按钮：

scope.polygonConfig.events.setMap(null);

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

"Cannot read property 'setMap' of undefined"

我也试过这个：

                   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>

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

编辑： 下面是演示此功能的示例：http://plnkr.co/edit/t7zz8e6mCJavanWf9wCC?p=info

对于 angular google 地图，我该如何删除多段线？

For angular google maps how do I remove the polyline?

javascript

angularjs

google-maps

angular-google-maps