javascript - Mapboxgl JS 不会删除标记

Question

我正在尝试删除 MapboxGL map 中的标记，如下 question但它不起作用，它抛出:

var marker = new mapboxgl.Marker().addTo(map);
marker.remove();
TypeError: e is undefined

我的工作流程是抛出一个 JavaScript 函数来删除标记并添加新标记:

            geojson.features = new_features;
            /* here code to remove!! */
            HERE CODE TO REMOVE!
            /* add markers to map */

            geojson.features.forEach(function(marker) {
              // create a HTML element for each feature
              var el = document.createElement('div');
              el.className = 'marker';

              // make a marker for each feature and add it to the map
              var new_marker = new mapboxgl.Marker(el)
                  .setLngLat(marker.geometry.coordinates)
                  .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
                  .addTo(map);
            });

In my last effort I tried this to remove with this but It doesn't work well (The workflow updates randomly markers):

            /* remove markers */
            var markers = document.getElementsByClassName('marker');
            for (i = 0; i < markers.length; i++) {
                var marker = markers[i];                    
                marker.remove();
            }

更新

我尝试了建议的解决方案，但它不起作用......:

        let markers = [];
        geojson.features.forEach((feature) => {
          let marker = new mapboxgl.Marker().setLngLat(feature.geometry.coordinates).addTo(map);
          markers.push(marker);
        });

        // clear markers array
        markers.forEach((marker) => marker.remove())


        geojson.features = features;

        geojson.features.forEach(function(marker) {
          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'marker';
          //el.setAttribute("longitude",marker.geometry.coordinates[0].toString());
          //el.setAttribute("latitude",marker.geometry.coordinates[1].toString());

          // make a marker for each feature and add it to the map
          var new_marker = new mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
                  .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
              .addTo(map);
        });

Answer 1

发生错误是因为您需要指定标记的坐标:

let marker = new mapboxgl.Marker().setLngLat([30.5, 50.5]).addTo(map);

之后您可以删除标记:

marker.remove();

就您而言，您可以将所有标记保存到数组中，然后删除每个标记:

var markers = [];

function drawMarkers(features){
  clearMarkers();
  features.forEach((feature) => {
    let marker = new mapboxgl.Marker()
      .setLngLat(feature.geometry.coordinates)
      .setPopup(new mapboxgl.Popup()
        .setHTML(`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`))
      .addTo(map);
    markers.push(marker)
  });
}

function clearMarkers(){
  markers.forEach((marker) => marker.remove());
  markers = [];
}

drawMarkers(<YOUR FEAUTURES>);