时间戳

首页 > 解决方案 > PrimeNG GMap 组件在从变量传递 lat 和 long 时不显示地图

angular - PrimeNG GMap 组件在从变量传递 lat 和 long 时不显示地图

问题描述

我正在构建 Angular 9 应用程序以及带有 GMap 组件的 PrimeNG 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 值，我已将字符串转换为 Number。

在控制台中：

在此处输入图像描述

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

请帮忙。

标签： angulartypescriptgoogle-mapsprimeng

解决方案

该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>

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

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

希望这可以帮助！

推荐阅读