Mapbox GL JS - Добавить новый маркер и удалить предыдущий маркер

Question

Моя функция должна отображать маркер поверх существующего значка (города США) при нажатии / выборе. Маркер представляет собой файл изображения. Затем, когда пользователь нажимает на другую иконку, предыдущий маркер должен исчезнуть.

Поначалу кажется, что он работает нормально. Первый маркер создается при нажатии значка. Если щелкнуть второй значок, маркер будет создан, а исходный маркер исчезнет. При нажатии на третий значок маркер не отображается. Консоль говорит «маркер не определен».

Вот мой код:

map.on('click', 'usa_cities', function(highlightMarker) {
            var markerCoordinates = highlightMarker.features[0].geometry.coordinates.slice();    
            var markerElement = document.createElement('div');
            markerElement.id = 'marker';
            // create the marker
            new mapboxgl.Marker(markerElement)
                .setLngLat(markerCoordinates)
                .addTo(map);
            map.on('click', 'usa_cities', function() {
                marker.remove()
            });      
        }),

Спасибо

Answer 1

Вам не нужно создавать новый маркер каждый раз, когда пользователь нажимает. Вы можете просто позвонить marker.setLngLat(markerCoordinates).