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

您可以尝试这样。

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

1 个答案: