使用 mapbox-gl-js 将标记动态添加到 geoJSON 数组

Question

我见过几个带有多个标记的 Mapbox 地图示例，但标记位置已预先编程到 geoJSON 数组中，例如 here。

我希望能够通过一种方法向地图添加标记并保留现有标记。标记将从内置的地理编码器搜索中创建。旧的 mapbox.js 似乎可以使用类似以下内容的内容：

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

但是，我似乎无法使用 mapbox-gl-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' 的回调中。