Динамическое отображение agm-карты / обновление маркеров не работает

Я использую Angular Google Maps ( https://angular-maps.com/) в приложении Angular 5, также использую socket.io для опроса широты и долготы с сервера. Я могу отправить данные в массив в компоненте, но карта agm не обновляется

component.ts

import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {

  public title: string = 'AGM project';
  public lat: number = 12.954517;
  public lng: number = 77.3507335;


  public msg : string;
  public mcar = 
  "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png";
  public agmMarkers: agmmarker[] = [
  {
    lat: 12.954517,
    lng: 77.3507335,
    icn: this.mcar
  }
 ];

 constructor(private socketService : SocketService) { }

ngOnInit() {
 this.socketService
    .getMessage()
    .subscribe((msg: any) => {
      console.log("msg: "+JSON.stringify(msg));
      this.updateMarkers(msg);
    });
}

public updateMarkers(msg){
 this.agmMarkers = [];
  for (let entry of msg.stats) {
    console.log("entry.latlng.lat: "+entry.latlng.lat); 
    console.log("entry.latlng.lng: "+entry.latlng.lng); 
    this.agmMarkers.push({
      lat: entry.latlng.lat,
      lng: entry.latlng.lng,
      icn: this.mcar
    });
  }
 }
}

interface agmmarker {
  lat?: number;
  lng?: number;
  icn?: string;
}

component.html

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker *ngFor="let i of agmMarkers" 
      [latitude]="i.lat" [longitude]="i.lng" [iconUrl]="i.icn">
    </agm-marker>
</agm-map>
Источник

3 ответа

Решение

Виноват. Ответ от службы был в строковом формате.

this.agmMarkers.push({
  lat: +entry.latlng.lat,
  lng: +entry.latlng.lng,
  icn: this.mcar
});

Типы широты и долготы решили проблему.

Источник

Я использую @agm/core": "^1.0.0-beta.2

   import { MapsAPILoader } from '@agm/core';



    export class JovenComponent implements OnInit
         { 

        constructor(public mapsApiLoader: MapsAPILoader) {}
        ngOnInit() {
                     //once you get data from the service this.joven=data
                    //here data is having all the information
                      this.mapsApiLoader.load().then(()=>{
                      this.lat=Number(this.joven.user_residential_address.latitude);
                      this.lng=Number(this.joven.user_residential_address.longitude);
                         })
                   }
          }

В HTML

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="true">
                      <agm-marker [latitude]="lat" [longitude]="lng">
                        <agm-info-window>
                          <strong>{{joven.name}}</strong>
                          <br/>
                          <strong>Cidade: {{joven?.user_residential_address?((joven?.user_residential_address?.city!==null)?joven?.user_residential_address?.city:'&mdash;'):'&mdash;'}}
                          </strong>
                          <br/>
                          <strong>Código de estado: {{joven?.user_residential_address?((joven?.user_residential_address?.stateCode!==null)?joven?.user_residential_address?.stateCode:'&mdash;'):'&mdash;'}}
                          </strong>
                          <br/>
                          <strong>CEP: {{joven?.user_residential_address?((joven?.user_residential_address?.zipcode!==null)?joven?.user_residential_address?.zipcode:'&mdash;'):'&mdash;'}}
                          </strong>
                        </agm-info-window>
                      </agm-marker>
                    </agm-map>

Источник

NgZone отвечает за обновление карт agm

У вас есть импорт NgZone из angular / core

конструктор (частный ngZone: NgZone) {}

Вызов события Modify map вы должны сохранить этот код / ​​функциональность модификации карты в блоке запуска ngZone.

        this.ngZone.run(() => {     
      // map modification code

Перейдите по ссылке, чтобы узнать подробности

https://softtechdiary.com/questions/agm-dynamic-marker-not-updating/amp/

Источник
Другие вопросы по тегам