agm-map 动态显示/更新标记不起作用

Posted 2023-04-18

【中文标题】agm-map 动态显示/更新标记不起作用

【英文标题】：agm-map dynamic display/updation of markers not working

【发布时间】：2018-11-24 21:27:39

【问题描述】：

我在 Angular 5 应用程序中使用 Angular Google Maps (https://angular-maps.com/)，还使用 ​​socket.io 从服务器轮询纬度和经度。我能够将数据推送到组件中的数组，但 agm-map 没有得到更新

组件.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>

【参考方案1】：

我的错。服务的响应是字符串格式。

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

类型转换纬度和经度解决了这个问题。

【讨论】：

是的，类型转换也是我的解决方法。我添加到 agmMarkers 的对象的 lat 和 lng 是数字而不是字符串。

嘿@Abhijath。有什么方法可以使地图上的移动标记平滑过渡？使用 ngFor 更新会在地图上闪烁。

【参考方案2】：

我正在使用@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>