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

Question

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

我已经引用了AGMPolygon,但它没有解决我的问题

Answer 1

2018年4月26日更新.

我不确定但似乎Angular Google Maps已经支持绘制多边形.你可以查看更多.

检查工作的plunker:

1. 基本版本(仅绘制多边形)https://stackblitz.com/edit/angular-vvrfqf

2. 更新版本(绘制多边形和交叉检查)(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());
        }
    });
}