如何解决如何使用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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。