如何使用agm-core绘制agm多边形？

Question

我可能在某个地方遇到了问题，但在我的地图上使用@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>

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

我要提前感谢你的帮助。

Answer 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

你可以试着这样做。