如何使用@ agm-core在角形Google地图上绘制多边形?

问题描述 投票:2回答:2

在我的应用程序中,我使用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']
    })
angular angular-google-maps
2个回答
10
投票

您最有可能遇到与agm-drawing-manager组件有关的错误,对吗?似乎agm-drawing-manager中使用的provided demo指令不再是angular-google-maps libraryangular-google-maps版本)的一部分,这就是发生这些错误的原因。

要启用Google Maps绘图工具,可以考虑以下解决方案(改编自1.0.0-beta.5:]

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中,不要忘记通过AgmCoreModule模块加载app.module.ts包:

drawing

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


0
投票

将agm与angular集成在一起使我陷于很多次。我发现使用Google Maps API更容易获得它。在Google Maps API Here is a demohere]上找到两篇文章

© www.soinside.com 2019 - 2024. All rights reserved.