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 container = document.createElement('div');
        // 该容器必须要有一定的padding，否则无法触发onmouseleave事件
        container.className = 'marker-container';
        container.innerHTML = getHtmlStr(redIcon)
        // 鼠标移入
        container.onmouseenter = () => {
            container.innerHTML = getHtmlStr(blueIcon)
        }
        // 鼠标移出
        container.onmouseleave = () => {
            container.innerHTML = getHtmlStr(redIcon)
        }

        return new mapboxgl.Marker({ element: container })
            .setLngLat(item.lnglat)
            .addTo(map)
    })
}

// 生成marker的内容
function getHtmlStr (iconUrl) {
    return `<div
                style="width:32px;
                height:32px;
                background-image: url(${iconUrl});
                background-size: contain;
                background-position: center center">
            </div>`
}

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

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
.marker-container {
    padding: 5px;
}