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

Question

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

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

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

但是，我似乎无法找到此类 method/functionality 与 mapbox-gl-js 的文档。我希望能够跟踪这些标记，并且 edit/delete 它们就像在这个 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' 的回调中。

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

Add markers on the fly to geoJSON array with mapbox-gl-js

geojson

mapbox

mapbox-gl-js