前言
官网指引，生成accesstoken，下载相关依赖请翻阅[/weixin_44402694/article/details/125414381?spm=1001..3001.5501](/weixin_44402694/article/details/125414381?spm=1001..3001.5501)本文使用官网accesstoken，请自行生成私人tokenmapbox添加跟随地图的自定义面板到地图上
效果
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>07、添加跟随地图的自定义面板到地图上</title><linkhref="/mapbox-gl-js/v2.7.0/mapbox-gl.css"rel="stylesheet"/><script src="/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script><style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}html,body {width: 100%;height: 100%;}#map {width: 100%;height: 100%;}.btn-list {position: fixed;top: 100px;left: 100px;}</style></head><body><div id="map"></div><ul class="btn-list"><li><button onclick="addMarker()">添加</button></li><li><button onclick="removeMarker()">删除</button></li></ul><script>let marker = nullmapboxgl.accessToken ='pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'const map = new mapboxgl.Map({container: 'map', // 容器 idstyle: 'mapbox://styles/mapbox/streets-v11', // mapbox底图center: [108, 35], // 初始化中心点zoom: 2, // 初始化层级})// 添加markerfunction addMarker() {const dom = document.createElement('div')dom.style = 'width: 200px; height: 200px; border-radius:10px;background-color: #fff; color: #000; padding: 20px;'dom.innerHTML = '自定义DOM面板'const tipsOption = {element: dom,anchor: 'left',offset: [10, 20],}// eslint-disable-next-line no-undefmarker = new mapboxgl.Marker(tipsOption).setLngLat([130, 20]).addTo(map)}// 移除markerfunction removeMarker() {marker.remove()}</script></body></html>
