如何用 Angular Google 地图绘制我的多边形？

Question

我在我的 angular 项目中使用这个版本的 Angular Google Maps "@agm/core": "1.0.0-beta.2" 。我关心的是如何重新绘制我在 google 地图上绘制的多边形，我正在存储纬度和经度，如何重绘我的多边形？ enter image description here

<agm-map [latitude]="latitudeMapUpdate"
                                                     [longitude]="longitudeMapUpdate"
                                                     [disableDefaultUI]="false"
                                                     [zoom]="13"
                                                     (mapReady)="onMapReady($event)">
</agm-map>

onMapReady(map) {
        this.initDrawingManager(map);
    }

initDrawingManager(map: any) {
    const self = this;
    const options = {
        drawingControl: true,
        drawingControlOptions: {
            drawingModes: ["polygon"]
        },
        polygonOptions: {
            draggable: true,
            editable: true
        },
        drawingMode: google.maps.drawing.OverlayType.POLYGON
    };
    const drawingManager = new google.maps.drawing.DrawingManager(options);
    drawingManager.setMap(map);
    google.maps.event.addListener(
        drawingManager,
        'overlaycomplete',
        (event) => {
            alert(event.overlay.getPath().getArray());
            const paths =  event.overlay.getPaths();
            
            drawingManager.setDrawingMode(null);
            self.updatePointList(event.overlay.getPath());
            const newShape = event.overlay;
            newShape.type = event.type;
            google.maps.event.addListener(newShape, 'click', () => {
                this.setSelectionPolygons(newShape)
            });
            this.setSelectionPolygons(newShape)
        });
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', this.clearSelection);
    google.maps.event.addListener(map, 'click', this.clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-map-button'), 'click', this.deleteSelectedShape);
    console.log({map});
}

Answer 1

无需依赖第三方 libraries/modules 为您实现地图，您可以直接加载脚本，这样您就可以像这样使用 google 地图的官方文档 simple polygon样本。为此，只需在 index.html.

中加载 JS 地图脚本

这里有一个工作示例供您参考：https://stackblitz.com/edit/angular-simple-map-64456023

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<my-app>loading</my-app>

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

simple-map.component.html

<div #map class="map"></div>

simple-map.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;

@Component({
  selector: "my-maps",
  templateUrl: "./simple-map.component.html",
  styleUrls: ["./simple-map.component.css"]
})
export class MapComponent implements OnInit {
  @ViewChild("map", { static: true }) mapElement: any;
  map: any;

  constructor() {}

  ngOnInit() {
    const mapProperties = {
      center: new google.maps.LatLng(24.886, -70.268),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(
      this.mapElement.nativeElement,
      mapProperties
    );
    // Define the LatLng coordinates for the polygon's path.
    const triangleCoords = [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 }
    ];
    // Construct the polygon.
    const bermudaTriangle = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(this.map);
  }
}

如何用 Angular Google 地图绘制我的多边形？

How to draw my polygon with Angular Google Map?

angular

google-maps

agm