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