我的服务仅在我的 ngx 传单地图上显示最后一个 json 元素标记

Question

如果我对数据进行硬编码，那么所有标记都会很好地显示出来。如果我注释行 this.markers.push(newMarker);并将其替换为下一个，我得到一个 ERROR TypeError: Cannot read 属性 'push' of undefine

如果我使用 this.markers = [newMarkers] 只有最后一个 json 元素显示为标记。

我怎样才能显示所有个标记，这是异步的问题吗？

ngOnInit() {

this._mapService.getMarkers().subscribe(data => {

    data.map(a => {
      const lat = a.lat;
      const lng = a.lng;
      const name = a.name;

      const newMarker = marker(
        [lat, lng], {
          icon: icon({
            iconSize: [25, 25],
            iconAnchor: [13, 41],
            iconUrl: 'assets/yellow.png',
          })
        }
      );
      newMarker.bindPopup('<p>' + name + '</p>', {autoPan: true});

      // this.markers.push(newMarker);

      this.markers = [newMarker];
 });

服务

@Injectable({
  providedIn: 'root'
})
export class MapserviceService {

  private _markers = '../../assets/markers/markers.json';

  constructor(private http: HttpClient) {}

  getMarkers(): Observable<any> {
   return this.http.get<any>(this._markers);
  }

JSON数据

[{
    "name": "Canada",
    "lat": 56.130366,
    "lng": -106.346771
  },
...
  {
    "name": "Anguilla",
    "lat": 18.220554,
    "lng": -63.068615
  }
]

有效的硬编码数据

  function createIcon2() {
    return icon({
      iconSize: [25, 25],
      iconAnchor: [13, 41],
      iconUrl: 'assets/yellow.png',
    });
  }

  this.markers =
    [
      marker([35, -76], { icon: createIcon2() }),
      marker([36, -81], { icon: createIcon2() }),
      marker([37, -88], { icon: createIcon2() }),
      marker([38, -99], { icon: createIcon2() }),
      marker([39, -111], { icon: createIcon2() })
    ];

    console.log('working', this.markers);

Answer 1

public markers: Marker[]; 声明您的 markers 成员但不初始化/分配任何东西。

: Markers[]部分用于TypeScript类型声明，但不初始化。

public markers: Marker[] = [] 会将其初始化为数组，您可以在其上使用 push 方法。

我的服务仅在我的 ngx 传单地图上显示最后一个 json 元素标记

My Service only displays the last json element marker on my ngx leaflet map

javascript

angular

typescript

leaflet

ngx-leaflet