从变量传递纬度和经度时，PrimeNG GMap 组件不显示地图

Question

我正在构建 Angular 9 应用程序以及带有 GMap 组件的 PrimeNG 9。

当我用静态的纬度和经度值加载 GMap 时，我可以看到地图，但是当我从变量中获取纬度和经度时，它没有显示任何内容。没有控制台错误，它只是空白

在 component.ts 文件中：

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
    selector: 'app-converter',
    templateUrl: './converter.component.html',
    styleUrls: ['./converter.component.scss'],
})
export class ConverterComponent implements OnInit {
    property1 = '1669289.06';
    property2 = '5646360.56';
    latitude: number;
    longitude: number;
    options: any;

    overlays: any[];
    constructor() {}




 displayMap() {
            this.options = {
                center: {
                    lat: this.latitude,
                    lng: this.longitude,
                },
                zoom: 12,
            };
            console.log(555, this.latitude, this.longitude);
            this.overlays = [
                /*    new google.maps.Marker({
            position: { lat: -37.6878, lng: 176.1651 },
            title: 'Tauranga',
        }),*/

                new google.maps.Circle({
                    center: {
                        lat: this.latitude,
                        lng: this.longitude,
                    },
                    fillColor: '#FFA726',
                    fillOpacity: 0.35,
                    strokeWeight: 1,
                    radius: 1500,
                }),
            ];
        } }

我的另一个转换器函数之一是保存纬度和经度值，我已将字符串转换为数字。

在控制台中：

注意：在 index.html 中，我正在加载我的 Google 地图脚本以及正确的 API 键。

请帮忙。

Answer 1

ngOnInit 方法在加载组件后立即执行，这发生在您在输入中输入任何坐标之前，因此这就是输入的坐标不会反映在地图上的原因。例如，尝试做这样的事情：

将(click)="updateMap()"添加到按钮：

<button pButton type="button" label="Display Map" class="ui-button-raised" (click)="updateMap()"></button>

将#gmap (onMapReady)="setMap($event)"添加到地图元素：

<p-gmap #gmap (onMapReady)="setMap($event)"
    [options]="options"
    [overlays]="overlays"
    [style]="{ width: '100%', height: '420px' }"
></p-gmap>

向 AppComponent 添加 map: google.maps.Map;、setMap 和 updateMap 函数：

export class AppComponent implements OnInit {
  name = "Primeng Gmap component";
  latitude;
  longitude;
  options: any;
  overlays: any[];
  receivedLatLong;
  map: google.maps.Map;

  setMap(event) {
    this.map = event.map;
  }

  updateMap() {
    if (this.latitude && this.longitude) {
      this.map.setCenter({
        lat: Number(this.latitude),
        lng: Number(this.longitude)
      });
    }
  }

  ngOnInit() {
    this.options = {
      center: {
        lat: -37.6878,
        lng: 176.1651
      },
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    console.log(555, +this.latitude, +this.longitude);
    console.log(666, this.options);

    this.overlays = [
      new google.maps.Circle({
        center: {
          lat: -35.131889,
          // lat: this.latitude,
          lng: 173.438361
          // lng: this.longitude,
        },
        fillColor: "#FFA726",
        fillOpacity: 0.35,
        strokeWeight: 1,
        radius: 1500
      })
    ];
  }
}

现在，如果您输入一些坐标并单击蓝色按钮，地图的中心将更改为所选坐标的中心。

希望对您有所帮助！

从变量传递纬度和经度时，PrimeNG GMap 组件不显示地图

PrimeNG GMap component is not showing map when passing lat and long from variable

google-maps

typescript

primeng

angular