如何用 agm-core 绘制 agm-polygon？答案

【问题标题】：How to draw an agm-polygon with agm-core?如何用 agm-core 绘制 agm-polygon？
【发布时间】：2019-10-15 06:16:10
【问题描述】：

我可能在某处遇到问题，但无法使用 @agm-core 组件在我的地图上绘制多边形。

地图显示良好且配置良好。它显示。

我的多边形点数组是（就像在控制台中写的一样）：

markers: [{"lat":44.841225,"lng":-0.580036},
{"lat":44.842236,"lng":-0.64696},
{"lat":44.805615,"lng":-0.63084},
{"lat":43.248627,"lng":5.392345},
{"lat":43.249471,"lng":5.404018},
{"lat":43.246595,"lng":5.397924},
{"lat":43.24747,"lng":5.408825}]

在我的模板中我写道：

<agm-map [latitude]="coordinates.latitude" [longitude]="coordinates.longitude" [zoom]="15"
  <agm-polygon [paths]="markers">
  </agm-polygon>
</agm-map>

有人能告诉我这里发生了什么吗？

提前感谢您的帮助。

【问题讨论】：

标签： angular google-maps

【解决方案1】：

/// <reference types="@types/googlemaps" />
import { Component, HostListener, OnInit } from '@angular/core'

@Component({
  selector: 'bfx-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  mapCenterPosition = {
      lat: 11.3821188,
      lng: 77.89472419999993,
    }
  map: google.maps.Map

  onMapReady(map: google.maps.Map) {
    this.map = map
    this.drawPolygon()
  }

  drawPolygon() {
    const paths = [
        { lat: 12.3175489124641, lng: 78.48798591874993 },
        { lat: 8.210490392434776, lng: 77.38935310624993 },
        { lat: 10.59482777210473, lng: 79.58661873124993 },
      ]
    const polygon = new google.maps.Polygon({
      paths: paths,
      editable: true,
      draggable: true,
    })

    polygon.setMap(this.map)
  }
  }


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

需要 npm i @types/googlemaps

你可以这样试试。

【讨论】：