Question

我正在尝试使用ngmap在地图上绘制多边形。正如this示例所示，地图显示正确，但是当我完成绘制时，这就是我所得到的：

ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined

我使用了相同的示例代码。

我的问题：

1-如何解决此错误？

2-如果我想让用户只绘制多边形表格，我试图将drawingMode的值设置为“多边形”，但我总是有其他绘制选项（圆...）。怎么只让多边形画？

3-如何让用户清除绘制的多边形？

4-是否可以检测到（绘制）每个点的动作。我的意思是在多边形中绘制一条线，例如我需要至少两个点。我可以检测用户何时绘制第一个点然后第二个点并获取其坐标？

修改

这是我在添加ng-map.js而不是ng-map.min.js时看到的整个错误：

Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
    at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44)
    at Array.reduce (native)
    at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39)
    at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
    at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
    at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70)
    at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249)

修改2

我解决了第一个问题：

我的问题是我在app.js中使用路由。因此，html和controller已关联在其中。为了解决这个问题，我把$scope.onMapOverlayCompleted代替了。{ var vm = this; vm.onMapOverlayCompleted因为我没有在ng-controller="DrawingManagerCtrl as vm"中写HTML。然后在HTML我放on-overlaycomplete="onMapOverlayCompleted()"，它就可以了。

我使用以下方法解决了第二个问题：

 drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"

我现在想要解决其他问题。

请帮忙吗？

Answer 1

第3

正如example you referenced所示，overlaycomplete回调函数接收e（Event）作为第一个参数。此OverlayCompleteEvent对象包含对Event.overlay处绘制的叠加层的引用（请参阅原始Google Maps JS API的docs更多信息，因为ng-map仅是原始API的封装器all，特别是“OverlayCompleteEvent对象规范”部分）。

使用它可以获得对创建的叠加层的引用，将其存储，然后再调用它上面的.setMap(null)将其从地图中删除。 E.g：

$scope.myDrawnOverlays = []; //array where you store drawn overlays $scope.onMapOverlayCompleted(e){ ... myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn } $scope.deleteAllDrawnOverlays(){ for(var i = 0; i < myDrawnOverlays.length; i++){ myDrawnOverlays[i].setMap(null); //remove overlays from map one by one } myDrawnOverlays = []; }

然后，只要您想要删除所有叠加层，只需调用函数$scope.deleteAllDrawnOverlays（您可以使用ng-click将其绑定到某个按钮，或者随意执行任何操作）。

<强> 4

使用您的示例中使用的google.maps.drawing.DrawingManager无法做到这一点。原因是DrawingManager不支持在绘制时单击地图的事件（再次参见docs可能的事件，“DrawingManager类”部分。）

所以除了hacky变通方法可能会随着新的api发布而破解，唯一可行的解决方案是自己实现多边形绘制而不使用DrawingManager。例如，请检查此SO answer，特别是referenced example（在地图上单击鼠标右键）。他们不使用ng-map，但基本上你要做的就是将on-click="mapClickHandler"添加到ng-map，在你点击地图的mapClickHandler获取位置，绘制标记那里看起来像一个点，如果你有更多的点连接线。

但这对于一个问题来说太多了，您可能需要自己阅读ng-map以及Google Maps Js Api的相关部分。

使用ngmap

1 个答案: