Добавить маркеры на лету в массив geoJSON с mapbox-gl-js

Question

Я видел несколько примеров карт Mapbox с несколькими маркерами, но местоположения маркеров предварительно запрограммированы в массив geoJSON, такой как один here.

Я хотел бы добавить маркер к карте с помощью метода и сохранить существующие маркеры. Маркеры будут созданы из встроенного поиска геокодирования. Похоже, что это возможно со старым mapbox.js с чем-то вдоль линий этого:

L.geoJson(geojsonFeature, { ... }).addTo(map); 

Однако, я не могу найти документацию для такого метода/функциональности с MapBox-ГЛ-JS. Я хотел бы иметь возможность отслеживать эти маркеры и редактировать/удалять их, как в этом fiddle. Я что-то упускаю?

Вот мой текущий код, который работает только с одним маркером. Если вы добавите новый маркер, он в настоящее время заменяет старый. Я хотел бы продолжать добавлять их из геокодера крючка:

mapboxgl.accessToken = 'xxx'; 

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [-79.4512, 43.6568], 
    zoom: 13 
}); 

var geocoder = new mapboxgl.Geocoder({ 
    container: 'geocoder-container' 
}); 

map.addControl(geocoder); 

map.on('load', function() { 
    map.addSource('single-point', { 
     "type": "geojson", 
     "data": { 
      "type": "FeatureCollection", 
      "features": [] 
     } 
    }); 

    map.addLayer({ 
     "id": "point", 
     "source": "single-point", 
     "type": "circle", 
     "paint": { 
      "circle-radius": 5, 
      "circle-color": "#007cbf" 
     } 
    }); 

    var el = document.createElement('div'); 
    el.id = 'marker'; 
    var markerObject;  

    map.addControl(new mapboxgl.NavigationControl()); 
    geocoder.on('result', function(ev) { 
     var placeName = JSON.stringify(ev.result.place_name); 
     console.log(placeName); 

     var popup = new mapboxgl.Popup({offset:[0, -30]}) 
      .setText(ev.result.place_name); 

     markerObject = new mapboxgl.Marker(el, {offset:[-25, -25]}) 
     .setLngLat(ev.result.geometry.coordinates) 
     .setPopup(popup) 
     .addTo(map); 
    }); 
}); 

Answer 1

Этот код структурирован с линиями

var el = document.createElement('div'); 
el.id = 'marker'; 
var markerObject; 

вне метода geocoder.on('result'. Если вы хотите, чтобы новый маркер добавлялся каждый раз, когда обратный вызов был отправлен на geojson.on('result', возникает проблема: вы пытаетесь использовать один и тот же элемент div для нескольких маркеров. Mapbox GL JS не клонирует или не дублирует этот элемент для вас: ожидание состоит в том, что аргумент элемента нового mapboxgl.Marker является новым элементом.

Итак, чтобы исправить эту проблему, вы перемещаете вышеуказанные строки внутри обратного вызова для geocoder.on('result'.