页面1、mapbox添加自定义图片marker标记点和气泡弹窗

实现功能：自定义mapbox地图标记点的图标样式，换成自己的图片，并在点击图片的时候，弹出自定义的气泡弹窗。

HTML源码在最后面哦，复制就能直接使用（accessToken要换成自己的才行哦）

效果图：

 【实现步骤】

1、新建HTML页面，引入mapbox-gl.css和mapbox-gl.js

        <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>

2、创建一个地图容器，用来放地图：

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

3、在js里创建一个地图：

mapboxgl.accessToken =  ''; //这里换成你自己的就行了
       
           //创建地图
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v12',
                center: [-0.1048690838691802, 51.52323567974473], //中心点,伦敦法灵顿
                zoom: 14
            });

4、根据定义的图标数组，在map的load方法里，遍历将标记点添加到地图上，并添加气泡弹窗：

map.on('load', () => {
                //添加自定义标记点
                for (const item of geoj