使用ngmap绘制多边形 [英] Draw polygon using ngmap

问题描述

我试图在我的地图上使用 ngmap 绘制多边形。地图以这个示例显示的方式正确显示，但是当我完成这是我得到的：

  ng-map.min.js：25 Uncaught TypeError：无法读取属性'onMapOverlayCompleted'的未定义
  

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

我的问题：

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

2-如果我想让用户只绘制多边形，我尝试设置 drawingMode 的值，到多边形，但我总是有其他的绘制选项（圆圈......）。如何才能让多边形绘制？

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

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

编辑

这是当我包含 ng-map.js 而不是 ng-map.min.js时看到的整个错误：

  Uncaught TypeError：无法读取属性'onMapOverlayCompleted'undefined 
 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）
在P4 ._。z.trigger（https://maps.google.com/ P4 / api / js？key = MY_API_KEY& libraries =地点，可视化，绘图，几何图形，地点：99：121）
< 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）
在Object ._。z.trigger（ https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121）
在F4（https://maps.google .com / maps-api-v3 / api / js / 28/14 / drawing_impl.js：7：70）G4的
（https://maps.google.com/maps-api-v3/api/ js / 28/14 / drawing_impl.js：4：249）
  

我解决了第一个问题：

我的问题是我在应用中使用路由.js文件。因此， html 和控制器是链接的。为了解决这个问题，我把 $ 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']}
  

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

任何帮助吗？ 解决方案

3

正如示例引用显示， overlaycomplete 回调函数接收 e （Event）作为第一个参数。这个 OverlayCompleteEvent 对象包含对 Event.overlay 中绘制的叠加层的引用（参见 ng rel =nofollow noreferrer> docs -map 毕竟只是原始API的封装，特别是OverlayCompleteEvent object specification部分）。

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

  $ scope.myDrawnOverlays = []; //数组，其中存储绘制的叠加层
 $ scope.onMapOverlayCompleted（e）{
 ... 
 myDrawnOverlays.push（e.overlay）; //绘制覆盖图后，存储引用
} 
 $ scope.deleteAllDrawnOverlays（）{
 for（var i = 0; i< myDrawnOverlays.length; i ++）{
 myDrawnOverlays [i] .setMap（null）; //从地图中逐个删除覆盖图
} 
 myDrawnOverlays = []; 
} 
  

然后，只要您想删除所有叠加层，只需调用函数 $ scope.deleteAllDrawnOverlays （你可以使用 ng-click 或者做任何你想做的事情将它绑定到某个按钮上） p>

4

使用 google.maps .drawing.DrawingManager 在你的例子中使用。原因是DrawingManager不支持在绘制时单击地图的事件（请参阅

所以除了hacky可以打破任何新的api版本的解决方法之外，唯一可能的解决方案是自己实现绘制多边形，而不是使用 DrawingManager 。请检查这个 SO答案，特别是引用示例（右键单击地图）。他们不使用ng-map，但基本上你需要做的是将 on-click =mapClickHandler添加到你的 ng- map ，在 mapClickHandler 中获取您在地图上点击的位置，在那里绘制标记，看起来像点，如果有更多的点连接它们与线。

然而，这对于一个问题来说太多了，您可能必须仔细阅读 ng-map 和相关内容Google地图Js的各个部分请自行处理。

I'm trying to draw polygon on my map using ngmap. The map is displayed correctly as this example is showing, but when I finish the draw, this is what I'm getting:

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

I used the same code of the example.

My questions:

1- How can I solve this error?

2- If I want to let the user draw only polygon form, I have tried to set the value of drawingMode to "polygon" but I'm always having the other draw options (circle...). How can let only the polygon draw?

3- How can I let the user clear the drawn polygon?

4- Is it possible to detect the action of putting (drawing) every points. I mean that to draw a line in the polygon for example I need at least two points. Can I detect when the user draw the first point then the second and get its coordinates?

Edit

This is the whole error that I see when I include ng-map.js instead of 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)

Edit 2

I solved the first question:

My problem was that I'm using routes in the app.js. So the html and the controller are linked in it. To solve the problem, I put $scope.onMapOverlayCompleted instead of var vm = this; vm.onMapOverlayCompleted because I don't write the the ng-controller="DrawingManagerCtrl as vm" in my HTML. Then in the HTML I put on-overlaycomplete="onMapOverlayCompleted()" and it works.

I solved also the second question by using:

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

I'm want now to solve the other problems.

Any help please?

解决方案

3

As the 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 of the original Google Maps JS API more info, since ng-map is only wrapper of the original API after all, specifically "OverlayCompleteEvent object specification" section).

Using that you can get the reference to the created overlay, store it and then later call .setMap(null) on it to delete it from map. 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 = [];
}

Then whenever you want to delete all overlays, just call the function $scope.deleteAllDrawnOverlays (you can tie it to some button using ng-click or do whatever you want with it).

4

This is NOT possible using google.maps.drawing.DrawingManager which is used in your example. The reason is that DrawingManager doesn't support events for clicking at the map while drawing (see docs again for possible events, section "DrawingManager class").

So except hacky workarounds which could break any time with new api release, the only possible solution is to implement drawing of polygon yourself and not use DrawingManager. Check for example this SO answer, specifically the referenced example (right-clicks on map). They don't use ng-map, but basically what would you have to do is to add on-click="mapClickHandler" to your ng-map, in the mapClickHandler get position where you clicked on map, draw Marker there which would look like a dot and if you have more dots connect them with lines.

This is however too much for one question, you would have to probably read up on ng-map and relevant sections of Google Maps Js Api yourself.

这篇关于使用ngmap绘制多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！