SOURCE

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-zh-v1',
    center: [116.40355, 39.91737],
    zoom: 11
});

const redIcon = 'http://image-ypaiyun.test.upcdn.net/image/20201027105123.png'
const blueIcon = 'http://image-ypaiyun.test.upcdn.net/image/20201027105820.png'

const markers = addMarkers();

function addMarkers() {
    const data = [
        {
            id: 1,
            lnglat: [
                116.39087677001953,
                39.919216100221554
            ]
        },
        {
            id: 2,
            lnglat: [
                116.37439727783203,
                39.879971466780596
            ]
        }
    ]
    return data.map(item => {
        const dom = document.createElement('img');
        dom.width = 32
        dom.src = redIcon
        // 鼠标移入时的图标
        dom.onmouseenter = () => { dom.src = blueIcon }
        // 鼠标移出是的图标
        dom.onmouseleave = () => { dom.src = redIcon }
        return new mapboxgl.Marker({ element: dom })
            .setLngLat(item.lnglat)
            .addTo(map)
    })
}

<div id='map'></div>

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
.marker {
    display: block;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}