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

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

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

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

Однако я не могу найти документацию для такого метода / функциональности с mapbox-gl-js. Я хотел бы иметь возможность отслеживать эти маркеры и редактировать / удалять их, как в этой скрипке < / а>. Я что-то упускаю?

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

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

mapbox mapbox-gl-js geojson
person registeredUser    schedule 10.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person tmcw    schedule 10.11.2016
comment
Отлично, спасибо! И просто вопрос типа "да / нет", возможно ли достичь функциональности, аналогичной той, которая присутствует в этой скрипке < / а>? - person registeredUser; 11.11.2016