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

对于角谷歌地图,如何删除折线？
我在使用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);
                        }
                    }
                };

解决方法

基于 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

原文地址：https://www.jb51.cc/js/156818.html