如何在單擊事件時向 Mapbox 添加標記？

Question

我是計算機專業的法國學生，我必須使用 Mapbox，但自從我創建了一個類，我就被這個錯誤所困擾。當我不在課堂上時，它運行良好，但現在它完全壞了。我看到了一些主題可能來自 safari，但我已經在 Mozilla 上對其進行了測試，但它仍然損壞。

這是我的課。

  constructor() {
    //Temporary array of currentMarkers
    let currentMarkers=[];
    let type ="";
    //Create the map
    mapboxgl.accessToken = 'private data';
    this.mapbox = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40], // starting position
      zoom: 9 // starting zoom
    });

    //Add search bar from a plugin
    let geocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      placeholder: 'Saissisez une adresse', // Placeholder text for the search bar
      marker: {
        color: 'orange'
      },
      mapboxgl: mapboxgl
    });

    this.mapbox.addControl(geocoder);

    const mbox = this;

    this.mapbox.on("click",function(){
      this.getcoordonates();
    });


    //Allow us to create marker just with a research
    geocoder.on('result', function(e) {
      //Deleting all current markers
      if (currentMarkers!==null) {
        for (let i = currentMarkers.length - 1; i >= 0; i--) {
          currentMarkers[i].remove();
        }
      }
      //Add the markers who come with the research
      this.addMarker(e.result.center[0],e.result.center[1]);

      // Delete the last marker who got placed
      //currentMarkers[currentMarkers.length - 1].remove();
    });

      this.addPoint(2.333333 ,48.866667 ,"supervisor");
  }





  //split the JSON.stringify(e.lngLat.wrap()) to get the coordinates
  async mysplit(m){
    let z = m.split(',');
    let x = z[0].replace("{\"lng\":","");
    let g = z[1].replace("\"lat\":","");
    let y = g.replace("}","");
    await addMarker(x,y);
  }


  //Add a marker on click after the excution of mysplit() function
  async addMarker(x,y) {
    // tmp marker
    let oneMarker= new mapboxgl.Marker()
    .setLngLat([x,y])
    .addTo(this.mbox);
    currentMarkers.push(oneMarker);
  }



  // Get the coordinates and send it to split function
  getcoordonates(){
      mbox.on('click',function(e){
    let m = JSON.stringify(e.lngLat.wrap());
    this.mbox.mysplit(m);
  });
}

addPoint(y,x,type)
{
  let color ="";
  let t = type;

  if(t == "supervisor")
  {
    color = "grey";

  }else if (t =="fieldworker") {
    color = "red";
  }else if (t == "intervention") {
    color = "blue";
  }else alert("Nous ne pouvons pas ajouter votre marker\nLatitude : "+x+"\nLongitude :"+y+"\n car "+t+" n'est pas un type reconnu" );

  let myMarker = new mapboxgl.Marker({"color": color})
  .setLngLat([y,x])
  .addTo(this.mbox);
}





}

感謝您的幫助，祝您有美好的一天:)！ 對不起，如果我的英語不是那么好。

Answer 1

作為第一步，

   this.mapbox.on("click", function(e){
     this.getcoordonates();
   });

在Map類的任何方法之外調用。 它很可能屬於構造函數（如上面問題的評論部分所述）。

---

接下來，回調更改this的范圍，因此它不再指向Map實例。 此問題的常見解決方案是在this之前存儲/備份this ，例如：

constructor() {
  ...
  const thisObject = this;
  this.mapbox.on("click", function(e) {
    thisObject.getcoordonates();
  });
}

更新：每次點擊地圖時，當前形式的代碼邏輯都會嘗試添加一個新的點擊事件偵聽器。 這是不希望的。 這個getcoordonates()函數並不是真正需要的。 相反，這應該有效（從未測試過，它基於您的代碼）：

constructor() {
  ...
  const mbox = this;
  this.mapbox.on("click", function(e) {
    let m = JSON.stringify(e.lngLat.wrap());
    mbox.mysplit(m);
  });
}

評論：

• 在調用mysplit只是為了在那里解碼之前，JSON 編碼 lngLat 對象背后沒有真正的邏輯。
• 您在這里不需要它，但JSON.stringify()的反面是JSON.parse() 。 不需要像當前的mysplit()方法那樣在字符串級別使用它。
• 相反，應使用e.lngLat對象作為其參數直接調用mysplit()方法。
• 更進一步，由於沒有真正需要的“拆分”（解碼），因此mysplit()方法也不是真正需要的。

最后，這樣的事情應該有效：

constructor() {
  ...
  const mbox = this;
  this.mapbox.on("click", function(e) {
    await mbox.addMarker(e.lngLat.lng, e.lngLat.lat);
  });
}