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')
    });
});

当我左键单击Polygon顶点时，没有任何反应，但我可以完全编辑多边形。

我做错了什么？

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删除顶点

1 个答案: