在我的应用程序中,我使用Angular Google Maps(AGM)来构建地图。如何在其上绘制多边形?我遵循了https://stackblitz.com/edit/agm-polygon中描述的解决方案,但是缺少某些指令。如何在AGM地图上启用图形管理器并像示例中那样绘制多边形?
这是app.module中的导入:
AgmCoreModule.forRoot({
apiKey: 'key',
language: localStorage && localStorage.defaultLang || 'el',
libraries: ['places', 'drawing', 'geometry']
})
您最有可能遇到与agm-drawing-manager
组件有关的错误,对吗?似乎agm-drawing-manager
中使用的provided demo指令不再是angular-google-maps
library(angular-google-maps
版本)的一部分,这就是发生这些错误的原因。
要启用Google Maps绘图工具,可以考虑以下解决方案(改编自1.0.0-beta.5
:]
app.component.html
<agm-map [latitude]="center.lat" [longitude]="center.lng" (mapReady)="onMapReady($event)">
</agm-map>
app.component.ts
例如,可以通过为import { Component } from "@angular/core";
declare const google: any;
@Component({
selector: "app-map",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
center: any = {
lat: 33.5362475,
lng: -111.9267386
};
onMapReady(map) {
this.initDrawingManager(map);
}
initDrawingManager(map: any) {
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.drawing.DrawingManager
中,不要忘记通过AgmCoreModule模块加载app.module.ts
包:
drawing
AgmCoreModule.forRoot({ apiKey: "--YOUR-GOOGLE_MAPS_KEY-GOES-HERE--", libraries: ['drawing'] })
供参考
将agm与angular集成在一起使我陷于很多次。我发现使用Google Maps API更容易获得它。在Google Maps API Here is a demo和here]上找到两篇文章