Компонент PrimeNG GMap не показывает карту при прохождении широты и долготы от переменной - PullRequest
Новая
       12

Компонент PrimeNG GMap не показывает карту при прохождении широты и долготы от переменной

1 голос
/ 28 апреля 2020

Я создаю приложение Angular 9 вместе с PrimeNG 9 с компонентом GMap.

Когда я загружаю GMap со значениями stati c lat и long, я мог видеть карту, но когда я получаю lat и long из Variable, он ничего не показывает. Нет ошибок консоли, это просто пусто

enter image description here

В файле 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,
                }),
            ];
        } }

One из моей другой функции преобразователя содержит значение lat и long, и я преобразовал строку в число.

В консоли:

enter image description here

Примечание: в указателе. html Я загружаю Мой скрипт Google maps вместе с соответствующим ключом API.

Пожалуйста, помогите.

1 Ответ

1 голос
/ 04 мая 2020

Метод 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
      })
    ];
  }
}

Теперь, если вы введете некоторые координаты и нажмете синюю кнопку, центр карты изменится на центр выбранных координат. .

Надеюсь, это поможет!

...