如何在Angular中的地图上动态绘制多边形的形状 [英] How to draw a shape of polygon dynamically on map in Angular

问题描述

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

how to draw a shape of polygon dynamically(not predefined paths) and how to store lat long values of Polygon

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

I already refer AGMPolygon but it didn't solve my isuse

推荐答案

更新2018年4月26日.

我不确定，但看来Angular Google Maps已经支持绘制多边形.您可以查看更多.

I am not sure but seems that the Angular Google Maps has already supported drawing polygon. You can check more.

检查正在工作的插塞:

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

更新的版本(绘制多边形和相交检查)( plunker现在无法正常使用)

Updated version (draw polygon and intersect checking) (plunker is not working now) https://embed.plnkr.co/3sNWwX/

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

AGM is the best library for Angular 2 for now but It still needs to update more to reflect all the Google Maps API. So better we follow Google Maps doc and use it directly before the Angular community support it.

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

请注意，这是一个非常基础的工具，可让您绘制多边形并在完成后获取坐标.您可能还希望将所有与地图相关的代码移到服务中.

Please be noted that it is a very basic one which allows you to draw a polygon and get the coordinate once finishing. You might want to move all the map related code into a service as well.

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());
        }
    });
}

这篇关于如何在Angular中的地图上动态绘制多边形的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！