如何绘制带有agm-core的agm-多边形?

问题描述 投票:0回答:1

我在某处可能有问题,但是无法使用@ 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个回答
0
投票
/// <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

您可以尝试这样。

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