如何使用Angular Google Map绘制多边形？

问题描述

我在我的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,this.clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-map-button'),this.deleteSelectedShape);
    console.log({map});
}

解决方法

您可以直接加载脚本，而不必依赖第三方库/模块来实现地图，因此可以使用Google地图的官方文档，例如simple polygon示例。为此，只需将JS Map脚本加载到index.html中。

以下是一个工作示例供您参考：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);
  }
}