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;

{/ 1}}方法的。如果您希望每次向geocoder.on('result'提供回调时都添加新标记，则会出现问题：您尝试对多个标记使用相同的geojson.on('result'元素。 Mapbox GL JS不会为您克隆或复制该元素：期望新div的元素参数是新元素。

因此，要解决此问题，您可以在mapboxgl.Marker的回调中移动上述行。

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

1 个答案: