mapbox添加marker

本案例创建一个 marker标记，并添加到地图中。

琮琤5

3185人浏览 · 2024-03-02 09:40:17

琮琤5 · 2024-03-02 09:40:17 发布

本案例创建一个 marker 标记，并添加到地图中。

文章目录

1. 引入 CDN 链接
2. 创建地图
3. 添加 marker
4. 演示效果
5. 代码实现

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

这里我们创建了一个带有颜色的标注，并将其添加到地图上。

首先创建div元素作为标注的图层，显示在地图上。
接下来，创建一个mapboxgl.Marker对象。这个对象包含了标注的所有配置信息，包括颜色、是否可拖拽、受地形遮挡的透明度、旋转角度等。
然后，使用setLngLat方法设置了标注的位置。
最后，使用addTo方法将标注添加到地图上。

// 3.添加marker
const div = document.createElement("div");
div.id = "marker";
// 最简单的marker，放一个标注到地图上
const marker = new mapboxgl.Marker({
  // 颜色
  color: "#fd384c",
  // 是否可拖拽
  draggable: true,
  // 受三维地形遮挡的透明度
  occludedOpacity: 0.6,
  // 旋转
  // rotation:45,
  // 缩放
  scale: 1.5,
  element: div,
})
  .setLngLat([114.085947, 22.547])
  .addTo(map);

在这里，我们用图片作为标注，设置它的样式。

#marker {
  width: 50px;
  height: 50px;
  background: url("https://s2.loli.net/2024/02/28/ORiGIBqJEbo8rZe.png");
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
}

4. 演示效果

5. 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>marker</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;
      }
    </style>
  </head>
  <body>
    <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
        const div = document.createElement("div");
        div.id = "marker";
        // 最简单的marker，放一个标注到地图上
        const marker = new mapboxgl.Marker({
          // 颜色
          color: "#fd384c",
          // 是否可拖拽
          draggable: true,
          // 受三维地形遮挡的透明度
          occludedOpacity: 0.6,
          // 旋转
          // rotation:45,
          // 缩放
          scale: 1.5,
          element: div,
        })
          .setLngLat([114.085947, 22.547])
          .addTo(map);
      };
    </script>
  </body>
</html>