使用 leaflet 和 angular 时标记未出现在 map 上

Question

我正在创建一个 map，它显示存储在数据库中的坐标标记。 但是标记没有出现在 map 上 map 是 component.ts 文件的一部分：

ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice.getOneDAFacForm(this.getparamformid).subscribe((daFormFac: DAFormFac[]) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
      });

      let map = L.map('map').setView([10.536421, -61.311951], 8);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ'
  }).addTo(map);
  this.mapService.getMarkers(map)
  }

我正在使用 map 服务中的this.mapService.getMarkers(map)调用标记，该服务的 getMarkers() function 为：

baseURL: string = 'http://localhost:3000/DAFacility';
  constructor(private webReqService: WebRequestService, private http: HttpClient) { }

  getMarkers(map: L.Map): void {
    this.http.get(this.baseURL).subscribe((res: any)=> {
      for (const c of res){
        const lat = c.latitude;
        const lon = c.longitude;
        var marker = L.marker([lon, lat], {draggable: true}).addTo(map);
        marker.bindPopup(`<center><p><strong>${c.facilityName}</strong></p></center>`+ marker.getLatLng()).openPopup();
      }
      
    });
    
  }

数据存储在 DAFacility 数据库集合中，如下所示：

标记没有出现在 map 上，我相信这是我调用 map 服务的方式，但我尝试了我所知道的一切，但它没有用。 任何帮助，将不胜感激！

Answer 1

主要可能的原因是 Leaflet 需要 [latitude, longitude] 顺序的坐标，而你以相反的顺序传递它们，因此将你的标记放在世界的不同部分：

const lat = c.latitude;
const lon = c.longitude;
var marker = L.marker([lon, lat]).addTo(map); // Should be [lat, lon]