实现功能：自定义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="//i2.wp.com/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 geojson) {
// 创建标记点
const el = document.createElement('img'); //这里可以是任意标签
el.className = 'marker';
el.src = item.icon; //图片路径赋值
//添加气泡弹窗
let mhtml = `<div class="malert">
<h2 class="pti1">${item.title}</h2>
<div class="pti2">${item.description}</div>
</div>`
let popup1 = new mapboxgl.Popup()
.setHTML(mhtml)
// 添加自定义标记点
new mapboxgl.Marker(el)
.setLngLat(item.coordinates)
.setPopup(popup1)
.addTo(map);
}
});
完整的代码如下，只需替换mapboxgl.accessToken就行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加自定义图标标记点和气泡弹窗</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="//i2.wp.com/api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
}
/* //标记点图标样式 */
.marker {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 62px 20px -14px #434141;
border: 4px solid #fff;
object-fit: cover;
}
/* //气泡弹窗样式 */
.mapboxgl-popup-content {
width: 320px;
background: #fff;
padding: 8px 14px;
border-radius: 10px;
overflow: hidden;
}
.mapboxgl-popup-close-button {
font-size: 36px;
color: #607D8B;
right: 8px;
top: 5px;
border: none;
outline: none;
}
.malert .pti1 {
font-size: 22px;
color: #872202;
padding: 10px;
margin: 0;
line-height: 1.4;
}
.malert .pti2 {
font-size: 16px;
color: #607d8b;
border-top: 1px solid #c8cacb;
line-height: 1.8;
padding: 14px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ'; //这里换成你自己的就行了
//创建地图
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [-0.1048690838691802, 51.52323567974473], //中心点,伦敦法灵顿
zoom: 14
});
//图标列表
const geojson = [{
'title': '伦敦城市大学',
'description': '伦敦城市大学（London Metropolitan University）英文缩写London Met，是位于英国伦敦的一所公立综合性研究型大学。2002年，北伦敦大学和伦敦吉尔德霍尔大学合并，并决定使用伦敦城市大学的校名',
'icon': 'https://img0.baidu.com/it/u=771061597,13977956&fm=253&fmt=auto&app=138&f=JPEG?w=220&h=110',
'coordinates': [-0.10233707867577552, 51.528522330585105]
},
{
'title': '圣保罗座堂',
'description': "印度加尔各答圣保罗座堂（St. Paul's Cathedral）位于印度加尔各答的“attractions岛” - 毗邻维多利亚纪念堂、Nandan - Rabindra Sadan theatre complex和比尔拉天文馆。",
'icon': 'https://img0.baidu.com/it/u=3210667812,3480027929&fm=253&fmt=auto&app=138&f=JPEG?w=133&h=200',
'coordinates': [-0.09834595184549354, 51.514663593070466]
},
{
'title': 'VFS Global Indian Visa & Consular Application Centre',
'description': 'VFS全球印度签证及领事申请中心',
'icon': 'https://img1.baidu.com/it/u=723280391,1176186315&fm=253&fmt=auto&app=138&f=JPEG?w=107&h=160',
'coordinates': [-0.09937592005975986, 51.52577228073925]
}, {
'title': '大英博物馆',
'description': '大英博物馆（The British Museum），又名不列颠博物馆，位于英国伦敦新牛津大街北面的罗素广场',
'icon': 'https://img2.baidu.com/it/u=2175595291,1462174978&fm=253&fmt=auto&app=138&f=JPEG?w=180&h=180',
'coordinates': [-0.1269275705427139, 51.519817720155636]
}
];
map.on('load', () => {
//添加自定义标记点
for (const item of geojson) {
// 创建标记点
const el = document.createElement('img'); //这里可以是任意标签
el.className = 'marker';
el.src = item.icon; //图片路径赋值
//添加气泡弹窗
let mhtml = `<div class="malert">
<h2 class="pti1">${item.title}</h2>
<div class="pti2">${item.description}</div>
</div>`
let popup1 = new mapboxgl.Popup()
.setHTML(mhtml)
// 添加自定义标记点
new mapboxgl.Marker(el)
.setLngLat(item.coordinates)
.setPopup(popup1)
.addTo(map);
}
});
</script>
</body>
</html>