本案例我们使用Mapbox GL JS库进行删除标注小练习。


文章目录

  • 1. 引入 CDN 链接
  • 2. 创建地图
  • 3. 添加 marker
  • 3.1. marker 样式
  • 4. 删除所有 marker
  • 5. 演示效果
  • 6. 代码实现


1. 引入 CDN 链接


<!-- 1.引入CDN链接 -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 创建地图


我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别以及默认的地图投影模式。

// 初始化图像
const map = new mapboxgl.Map({
  // 在这个对象中，我们填入一些地图相关的参数设置
  container: "map", //地图容器
  style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
  center: [114.085947, 22.547], //默认注视的坐标点
  zoom: 12, //当前展示的地图级别
  projection: "globe", //地图投影模式
});

3. 添加 marker


  • 首先，我们创建了一个名为markers的空数组。这个数组将存储所有添加到地图上的标记对象。
  • 接下来，创建监听map对象的click事件。当我们在地图上单击时，会触发这个事件。我们在事件处理函数中做了以下操作：
  1. 创建一个空的数组，用于存放标记点；
  2. 获取点击位置的经纬度。
  3. 创建一个标记点，设置可拖拽，并将 div 作为标记点的元素。
  4. 使用setLngLat方法将 marker 设置为当前用户单击的经纬度。
  5. 将 marker 添加到地图上。
  6. 将 marker 对象推入markers数组中。
// 3.添加marker
// 点击地图，添加marker
// 创建一个空的数组，用于存放标记点
const markers = [];
// 监听地图的点击事件
map.on("click", (e) => {
  // 获取点击位置的经纬度
  const { lat, lng } = e.lngLat;
  // 创建一个div元素，用于作为标记点
  const div = document.createElement("div");
  // 设置div的id为marker
  div.id = "marker";
  // 创建一个标记点，设置可拖拽，并将div作为标记点的元素
  let marker = new mapboxgl.Marker({
    draggable: true,
    element: div,
  })
    // 设置标记点的经纬度
    .setLngLat([lng, lat])
    // 将标记点添加到地图上
    .addTo(map);
  // 将标记点添加到标记点数组中
  markers.push(marker);
});

3.1. marker 样式


/* 地图样式 */
* {
  margin: 0;
  padding: 0;
}
#map {
  width: 100vw;
  height: 100vh;
}
#marker {
  width: 50px;
  height: 50px;
  background: url("https://s2.loli.net/2024/02/28/ORiGIBqJEbo8rZe.png");
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
}
#removeBtn {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 3;
}

4. 删除所有 marker


定义removeBtn函数删除页面上的地图标记。如果markers.length大于 0，遍历markers数组，并使用forEach方法逐个移除每个标记。

// 4.删除所有marker
const removeBtn = document.getElementById("removeBtn");
removeBtn.onclick = () => {
  markers.length &&
    markers.forEach((marker) => {
      marker.remove();
    });
  markers.length = 0;
};

5. 演示效果


android Mapbox 使用SymbolLayer使用 textField 地图中不显示_swift

6. 代码实现


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mapbox删除标注小练习</title>
    <!-- 1.引入CDN链接 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      /* 地图样式 */
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #marker {
        width: 50px;
        height: 50px;
        background: url("https://s2.loli.net/2024/02/28/ORiGIBqJEbo8rZe.png");
        background-size: cover;
        border-radius: 50%;
        cursor: pointer;
      }
      #removeBtn {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <button id="removeBtn">删除所有标注</button>
    <div id="map"></div>
    <script>
      // 2.创建地图
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 初始化图像
        const map = new mapboxgl.Map({
          // 在这个对象中，我们填入一些地图相关的参数设置
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
          center: [114.085947, 22.547], //默认注视的坐标点
          zoom: 12, //当前展示的地图级别
          projection: "globe", //地图投影模式
        });
        // 3.添加marker
        // 点击地图，添加marker
        // 创建一个空的数组，用于存放标记点
        const markers = [];
        // 监听地图的点击事件
        map.on("click", (e) => {
          // 获取点击位置的经纬度
          const { lat, lng } = e.lngLat;
          // 创建一个div元素，用于作为标记点
          const div = document.createElement("div");
          // 设置div的id为marker
          div.id = "marker";
          // 创建一个标记点，设置可拖拽，并将div作为标记点的元素
          let marker = new mapboxgl.Marker({
            draggable: true,
            element: div,
          })
            // 设置标记点的经纬度
            .setLngLat([lng, lat])
            // 将标记点添加到地图上
            .addTo(map);
          // 将标记点添加到标记点数组中
          markers.push(marker);
        });
        // 4.删除所有marker
        const removeBtn = document.getElementById("removeBtn");
        removeBtn.onclick = () => {
          markers.length &&
            markers.forEach((marker) => {
              marker.remove();
            });
          markers.length = 0;
        };
      };
    </script>
  </body>
</html>