SOURCE

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 7,
    center: [119.3, 29.7],
    pitch: 0,
    bearing: 0,
    style: 'https://openmap.tech/styles/streets.json',
    hash: true
});

document.getElementById('select').addEventListener('change', function (e) {
    var type = e.target.value
    map.setStyle('https://openmap.tech/styles/' + type + '.json')
    map.on('data', loadSource)
})

map.on('load', function () {
    addMarkers()
})

function addMarkers() {
    const mapData = [
        {
            gridName: 1,
            longitude: 120,
            latitude: 30
        },
        {
            gridName: 2,
            longitude: 119,
            latitude: 29
        }
    ]


    window.toaMarkers = {};
    let dataJson = {
        type: "FeatureCollection",
        crs: { type: "name", properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" } },
        features: []
    };
    dataJson.features = mapData.map((item, idx) => {
        let feature = {
            type: "Feature",
            properties: { ...item },
            geometry: {
                type: "Point",
                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)]
            }
        };
        let el = document.createElement("div");
        el.className = "rank-marker"
        el.style.backgroundImage = "url(http://placekitten.com/g/40/40)";
        el.style.backgroundSize = "100%";
        el.style.width = '60px'
        el.style.height = '60px'
        let nameEl = document.createElement("div");
        nameEl.className = "marker-label";
        nameEl.innerText = "";
        el.append(nameEl);

        let marker = window.toaMarkers[item.gridName];
        if (marker) {
            marker.remove();
            marker = null;
        }
        window.toaMarkers[item.gridName] = new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map);
        return feature;
    });
}

<div id="map"></div>

<select name="select" id="select">
    <option value="streets" selected>标准</option>
    <option value="terrain"">地形</option>
    <option value="img"">影像</option>
</select>

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

select {
    position: absolute;
    right: 10px;
    top: 10px;
}

.mapboxgl-ctrl-scale {
    background-color: white;
}