如何在Angular的地图上动态绘制多边形形状答案

【问题标题】：How to draw a shape of polygon dynamically on map in Angular如何在Angular的地图上动态绘制多边形形状
【发布时间】：2017-06-27 13:21:39
【问题描述】：

如何动态绘制多边形形状（未预定义路径）以及如何存储多边形的经纬度值

我已经推荐了AGMPolygon，但它并没有解决我的问题

【问题讨论】：

你应该检查传单，你可以使用传单轻松实现它，http://leafletjs.com

标签： javascript angular google-maps

【解决方案1】：

2018 年 4 月 26 日更新。

我不确定，但似乎 Angular 谷歌地图已经支持绘制多边形。您可以查看more。

检查工作的 plunker：

基本版（仅绘制多边形）https://stackblitz.com/edit/angular-draw-polygon-google-maps
更新版本（绘制多边形和相交检查）（plunker 现在不工作）https://embed.plnkr.co/3sNWwX/

AGM 是目前 Angular 2 的最佳库，但它仍需要更新更多内容以反映所有 Google Maps API。所以最好我们遵循 Google Maps 文档并在 Angular 社区支持它之前直接使用它。

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

请注意，这是一个非常基本的方法，它允许您绘制多边形并在完成后获取坐标。您可能还想将所有与地图相关的代码移到服务中。

ngOnInit() {
    this.map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });

    this.drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['polygon']
        }
    });

    this.drawingManager.setMap(this.map);
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
        // Polygon drawn
        if (event.type === google.maps.drawing.OverlayType.POLYGON) {
          //this is the coordinate, you can assign it to a variable or pass into another function.
             alert(event.overlay.getPath().getArray());
        }
    });
}

【讨论】：

我不想重叠多边形，需要为多边形拖动
如果可能请不要重叠和拖动多边形
您可以先阅读文档并自己尝试。如果您遇到困难，我们可以提供帮助。
赏金给你
请告诉我如何检查多边形是否相交

【解决方案2】：

参考this并尝试使用javascript实现。代码会简单得多（我个人更喜欢这个） https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

【讨论】：