gpt4 book ai didi

angular - 如何使用@agm-core在 Angular 谷歌地图上绘制多边形?

转载 作者:行者123 更新时间:2023-12-02 21:02:41 25 4
gpt4 key购买 nike

在我的应用程序中,我使用 Angular Google Maps (AGM) 来构建 map 。如何在其上绘制多边形?我按照https://stackblitz.com/edit/agm-polygon中描述的解决方案进行操作但缺少一些指令。如何在 AGM map 上启用绘图管理器并像示例中那样绘制多边形?

这是 app.module 中的导入:

AgmCoreModule.forRoot({
apiKey: 'key',
language: localStorage && localStorage.defaultLang || 'el',
libraries: ['places', 'drawing', 'geometry']
})

最佳答案

您很可能遇到与 agm-drawing-manager 组件相关的错误,对吧? provided demo 中使用了 agm-drawing-manager 指令。不再是 angular-google-maps library 的一部分(1.0.0-beta.5 版本),这就是发生这些错误的原因。

要启用 Google map 绘图工具,可以考虑以下解决方案(改编自 official example):

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 类的单独指令来进一步改进

先决条件

app.module.ts 中,不要忘记通过 AgmCoreModule 模块加载 drawing 包:

AgmCoreModule.forRoot({
apiKey: "--YOUR-GOOGLE_MAPS_KEY-GOES-HERE--",
libraries: ['drawing']
})

Here is a demo供您引用

关于angular - 如何使用@agm-core在 Angular 谷歌地图上绘制多边形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54650666/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com