Question

如何动态绘制多边形的形状（不是预定义的路径）以及如何存储多边形的lat long值

我已经提到了AGMPolygon，但它没有解决我的问题

Answer 1

2018年4月26日更新。

我不确定但似乎Angular Google Maps已经支持绘制多边形。您可以查看more。

检查工作插件：

基本版（仅限绘图多边形）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());
        }
    });
}

Answer 2

请参阅此内容并尝试使用javascript实现。守则会简单得多（我个人更喜欢这个） https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

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

2 个答案: