对于角度谷歌地图,如何删除折线？

Question

对于角度谷歌地图,如何删除折线？我在使用templateUrl的指令中使用带有JavaScript的角度版本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:

到目前为止,我已经尝试了点击我的清晰地图按钮:

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:应用于多边形的自定义事件.这是一个关联数组,其中键是事件名称,值是处理函数.请参阅多边形事件.处理函数有四个参数(注意args在原始google sdk的默认args上扩展):

1.Polygon:GoogleMaps Polygon对象

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

$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