使用 ngmap 绘制多边形

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 因为我没有在我的HTML 中写ng-controller="DrawingManagerCtrl as vm"。然后在HTML 我把on-overlaycomplete="onMapOverlayCompleted()" 和它的工作原理。

我还解决了第二个问题：

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

我现在想解决其他问题。

有什么帮助吗？

Answer 1

3

正如example you referenced 所示，overlaycomplete 回调函数接收e（事件）作为第一个参数。这个OverlayCompleteEvent 对象包含对Event.overlay 绘制覆盖的引用（请参阅原始Google Maps JS API 的docs 更多信息，因为ng-map 毕竟只是原始API 的包装，特别是“OverlayCompleteEvent 对象规范”部分）。

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

$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 类”部分）。

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

然而，这对于一个问题来说太多了，您可能必须自己阅读ng-map 和 Google Maps Js Api 的相关部分。