Question

我调用API以返回带有地图标记列表的可观察对象。我正在尝试在地图上使用标准ngIf async逻辑来在可观察者接收到数据时显示地图。当它确实返回地图标记数据列表时，我尝试遍历agm-marker以在地图上动态生成标记，如下所示：

<agm-map *ngIf='ObservableListItems | async as listItems'
  [latitude]="lat" 
  [longitude]="lng">

  <agm-marker *ngFor='let items of listItems'
    [latitude]="items .latitude" 
    [longitude]="items .longitude"
    [iconUrl]="image'
    [title]="items.title"
    [label]="items.label"
    class="agm-marker">
  </agm-marker>
</agm-map>

现在，我知道这种逻辑应该在用简单的div测试时起作用，如下所示：

<div *ngIf='ObservableListItems| async as listItems'>
  <div *ngFor='let items of listItems'>
    <h1>{{items.latitude}}</h1>
    <h1>{{items.longitude}}</h1>
    <h1>{{items.title}}</h1>
    <h1>{{items.label}}</h1>
  </div>
</div>

我尝试了一段时间，但似乎无法使它在agm map和agm-marker上正常工作。我尝试将ng-content和ng-container与它一起使用，但是似乎仍然无法正常工作。有趣的是，根本没有控制台错误，只是没有渲染地图。

出于某些原因，我想使用可观察的东西。

更少的代码要写
不必管理订阅
我想添加else loading来显示css加载框架，直到返回数据以提高性能为止

我的组件ts文件无疑会有所帮助，但它显示了一些变量的来源，如下所示：

export class MapComponent {

  lat: number = 51.678418;
  lng: number = 7.809007;

  /* 
     These were used in the map but I removed as I do 
     not have anything to open yet. Hopefully not required
  */
  // markerClickable: boolean = true;
  // openInfoWindow: boolean = true;

  /* Custom marker icon for the map */
  image = {
    url: './assets/marker.png',
    scaledSize: {
      width: 60,
      height: 60
    }
  }

  constructor(private _MapService: MapService) { 

  }

  public get ObservableListMap(): Observable<Array<ListItemMap>> {
    return this._MapService.ObservableListMap;
  }
}

Angular Agm /核心地图无法使用async来显示地图并动态添加标记

0 个答案: