Mapboxgl JS не удаляет маркеры - PullRequest
Новая
       20

Mapboxgl JS не удаляет маркеры

1 голос
/ 11 апреля 2019

Я пытаюсь удалить свои маркеры на карте MapboxGL после этого вопроса , но это не работает, выдает: 

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);
            });

В своем последнем усилии я попытался удалить это с этим, но это не работает хорошо (рабочий процесс обновляет случайные маркеры): 

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

UPDATE

Я попробовал предлагаемое решение, но оно не работает ....: 

        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);
        });

1 Ответ

0 голосов
/ 11 апреля 2019

Ошибка возникает из-за необходимости указать координаты для маркера: 

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>);
...