在 Polygon 上使用 addListener 使用 AngularJs NgMap 删除顶点

Question

我正在尝试使用 AngularJs NgMap 删除地图上绘制的多边形上的单个顶点，但没有任何反应。我知道我需要在多边形上绑定一个 rightClick 事件，但什么也没有发生。

我知道有关于如何 delete the vertex here 的指南，但我无法触发事件进行。

到目前为止，这是我的代码：

html:

<ng-map center="[{{vm.googleMaps}}]" zoom="13" map-type-control="false" street-view-control="false">
    <marker position="[{{vm.googleMaps}}]"></marker>

    <shape name="polygon" paths="{{vm.paths}}" editable="true"
        stroke-color="#cde"
        stroke-opacity="0.8"
        stroke-weight="2"
        fill-color="#cde"
        fill-opacity="0.4">
    </shape>
</ng-map>

控制器：

$scope.$on('mapInitialized', function(event, map) {
    var polygon = new google.maps.Polygon({
        paths: vm.polygonPath
    });

    google.maps.event.addListener(polygon, 'rightclick', function() {
        console.log('RightClick')
    });
});

当我左键单击“多边形”顶点时，没有任何反应，但我能够完全编辑多边形。

我做错了什么？

Answer 1

为了在不使用 mapInitialized 的情况下获得正确的事件，我必须在 ng-map 指令中设置自定义侦听器并从那里传递事件。

之后，我可以在不使用 google.maps.event.addListener 的情况下使用 googleMaps 功能。

这是最终代码：

html

<ng-map center="[{{vm.googleMaps}}]" zoom="13" map-type-control="false" street-view-control="false">
    <marker position="[{{vm.googleMaps}}]"></marker>

    <shape name="polygon" paths="{{vm.paths}}" editable="true"
        on-rightclick="vm.myFunction($event)" //This is where we get the event with the point reference
        stroke-color="#cde"
        stroke-opacity="0.8"
        stroke-weight="2"
        fill-color="#cde"
        fill-opacity="0.4">
    </shape>
</ng-map>

AngularJs

我不需要使用我在问题上使用的代码，所以我们可以删除它。

vm.myFunction = function(event) {
    NgMap.getMap().then(function(evtMap) {
        var path = evtMap.shapes[0].getPath();
        return path.removeAt(event.vertex);
    });
}

与 GoogleMaps 示例的唯一区别是，这种方式将立即删除点，没有小框。

在 Polygon 上使用 addListener 使用 AngularJs NgMap 删除顶点

Usin addListener on Polygon to delete vertex with AngularJs NgMap

google-maps-api-3

angularjs

ng-map