Angular 当从变量传递lat和long时，启动GMap组件未显示map

我正在构建Angular 9应用程序，同时使用GMap组件启动9

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

在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,
                }),
            ];
        } }

我的另一个转换函数是保存lat和long值，我已经将字符串转换为数字

在控制台中：

注意：在index.html中，我正在加载我的谷歌地图脚本以及适当的API密钥。

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,
                }),
            ];
        } }

---

请帮忙

加载组件后立即执行

ngOnInit

方法，这发生在您在输入中键入任何坐标之前，因此键入的坐标不会反映在地图上。尝试这样做，例如：

将

（单击）=“updateMap（）”

添加到按钮：

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

添加

map:google.maps.map、
setMap
和
updateMap
函数到AppComponent：

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
      })
    ];
  }
}

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

希望这有帮助
 你能提供一个代码沙盒或stackblitz，这样我们就可以从我们这边复制这个问题吗？嗨@evan，请找到stackblitz的URL:。我已经删除了index.html中的API键，基本上如果我在ngOnInit中硬编码lat和long，那么映射工作正常，如果我传递变量，那么它不会显示任何内容。尝试了AfterContentInit和AfterViewInit挂钩。没有luckAny想要接受挑战的人，请看我的stackblitz，真的很难完成这项工作谢谢我今天会看一看并回复你我没有看到你的地图组件，灰色地图或按钮，请你添加所有内容以便我们可以复制它？嗨@evan。我衷心感谢您的努力，并使这项工作做得很漂亮……很高兴听到您的声音，也很高兴为您提供帮助！：）