Question

我正在尝试在Angular 4应用程序中使用AGM（https://angular-maps.com/）进行概念验证，基本上从api获取json并动态显示AGM地图中的位置。

不幸的是，来自api的JSON似乎没有更新地图。

你有什么想法吗？

提前谢谢。

export class HomeComponent implements OnInit {

  public PageTitle: string = 'Location';
  public latitude: number = 50.984795;
  public longtitude: number = 8.9483832;
  public zoom: number = 7;

  public CompanyMarkers: marker[]  ;

  public localState = { value: '' };

  constructor(
    public appState: AppState,
    public title: Title,
    private http: HttpClient,

  ) {  

}

getLocations() {
  return this.http.get<marker[]>('api')
  .map(res => res);
}

  public ngOnInit() {
    console.log('hello `Home` component');

     this.getLocations().subscribe(data => {
      this.CompanyMarkers = data;
      console.log('init');
      console.log(this.CompanyMarkers);

    });

  }

}

interface marker {
CompanyAccountId?:string;
companyName?:string;
latitude?: number;
longtitude?: number;
}


<agm-map 
        [latitude]="latitude" 
        [longitude]="longtitude" 
        [zoom]="zoom"
        [disableDefaultUI]="false"
        [zoomControl]="false">

    <agm-marker 
    *ngFor="let m of CompanyMarkers;let i = index;"  
    [iconUrl]="'/assets/icon/icon-company.png'" 
    [latitude]="m.latitude" 
    [longitude]="m.longtitude">
    <agm-info-window>
        <strong>{{m.companyName}} </strong>
    </agm-info-window>
</agm-marker>     
      </agm-map>

Answer 1

试试这个

<agm-marker 
    *ngFor="let m of CompanyMarkers;let i = index;"  
    [iconUrl]="'/assets/icon/icon-company.png'" 
    [position]="[m.latitude, m.longitude]">
    <agm-info-window>
        <strong>{{m.companyName}} </strong>
    </agm-info-window>
</agm-marker>

同时检查您的经度拼写

AGM地图不显示标记

1 个答案: