使用 ngmap 绘制多边形

Question

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

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

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

我的问题：

1- 我该如何解决这个错误？

2- 如果我只想让用户绘制多边形形式，我尝试将 drawingMode 的值设置为 "polygon" 但我总是有其他绘制选项（圆...）。怎样才能只画多边形呢？

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

作为原始 Google Maps JS API 的 example you referenced shows, the overlaycomplete callback function receives e (Event) as the first parameter. This OverlayCompleteEvent object contains reference to the drawn overlay at Event.overlay (see docs 更多信息，因为 ng-map 毕竟只是原始 API 的包装，特别是 "OverlayCompleteEvent object specification" 部分）。

使用它，您可以获得对创建的叠加层的引用，存储它，然后稍后对其调用 .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 class" 节）。

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

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

使用 ngmap 绘制多边形

Draw polygon using ngmap

html

google-maps

polygon

angularjs

ng-map