如何使用@ agm-core在有角的Google地图上绘制多边形? [英] How to draw polygon on angular google maps using @agm-core?

问题描述

在我的应用程序中，我使用Angular Google Maps(AGM)来构建地图.如何在其上绘制多边形?我遵循了 https://stackblitz.com/edit/agm-polygon 中所述的解决方案，但是一些指令丢失.如何在AGM地图上启用图形管理器并像示例中那样绘制多边形?

In my application, I use Angular Google Maps (AGM) to build a map. How can I draw a polygon on it? I followed the solution described in https://stackblitz.com/edit/agm-polygon but some directives are missing. How can I enable the drawing manager on the AGM map and draw polygons like in the example?

这是app.module中的导入:

This is the import in the app.module:

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

推荐答案

您最有可能遇到与 agm-drawing-manager 组件相关的错误，对吗?出现了 agm-drawing-manager 指令，该指令已在提供的演示不再是 angular-google-maps 库的一部分( 1.0.0-beta.5 版本)，这就是发生这些错误的原因.

You most likely getting errors related with agm-drawing-manager component, right? It appears agm-drawing-manager directive which is utilized in the provided demo is no longer part of angular-google-maps library (1.0.0-beta.5 version) and thatäs the reason why those errors occur.

要启用Google Maps绘图工具，可以考虑采用以下解决方案(改编自官方示例):

To enable Google Maps drawing tools the following solution could be considered (adapted from official example):

app.component.html

app.component.html

<agm-map [latitude]="center.lat" [longitude]="center.lng" (mapReady)="onMapReady($event)"> 
</agm-map> 

app.component.ts

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 包:

In app.module.ts don't forget to load drawing package via AgmCoreModule module:

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

这是一个演示供您参考

这篇关于如何使用@ agm-core在有角的Google地图上绘制多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！