Mapbox商店定位器，列表中的编号项目以及作为地图上标记的匹配编号

Question

我正在遵循本教程中的示例：https://www.mapbox.com/help/geocode-and-sort-stores/

我正在尝试为商店提供一个数字（或字母），并在地图上以相同的数字显示为标记。

在mapbox文档中找不到太多有关如何执行此操作的信息。非常感谢您的帮助！

谢谢！

Answer 1

您可以根据需要更改图标的网址

geojson.features.forEach(function(marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);
});