在 Mapbox 中添加新標記之前刪除以前的標記

Question

當地圖通過 GeoJson 數據加載時，我有以下代碼在該位置顯示標記。 它工作得很好，問題是我想在添加新標記時刪除以前的地圖標記。 我應該在哪里進行更改以完美工作。

這是完整的功能

prepareGeoJsonData(data) {
    let features = [];
    let counter = 0;

    for (let val of data) {
      features.push({
        type: "Feature",
        geometry: val.address.geometry.border,
        center: val.address.geometry.center,
        properties: {
          center: val.address.geometry.center.coordinates,
          landUnitId: val.memberOf.parcel[0]
        },
        id: counter++,
      });
      //
code for marker customization
//
        let marker = new mapboxgl.Marker(el)
          .setLngLat(cords)
          // .setPopup(popup)
          .addTo(this._mapRef);
        this.markers.push(marker);
      }
    };
    return {
      type: "FeatureCollection",
      features: features
    };
  }

當前流量：

頁面加載->地圖加載->標記出現->應用過濾器->添加新標記->以前的標記仍然存在

所需流量：

頁面加載->地圖加載->標記出現->應用過濾器->添加新標記->以前的標記消失

Answer 1

我只是假設您使用的是谷歌地圖。 你檢查過這個網址嗎？

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

TLDR；

    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(null);
    }

Answer 2

我面臨同樣的問題。 我做了一些研究，但找不到任何解決方案。 mapbox 中有一個 marker.remove() 方法。 下面是我所做的。

 // on click event, getting map data var clickMark = mapInner.on('click', (e) => { var coordinates = e.lngLat; // Create a new marker. var marker = new mapboxgl.Marker() .setLngLat(coordinates) .addTo(mapInner); // Inner on click event to remove old marker mapInner.on('click', () => { try { marker.remove(); } catch(err) { console.log(err) } }); });