（十三）mapbox-gl的Popup的使用详解

匹马夕阳

已于 2025-03-25 07:52:39 修改

阅读量938

点赞数 34

分类专栏： mapbox-gl集锦文章标签： javascript webgl

于 2025-03-11 21:36:57 首次发布

本文链接：https://blog.csdn.net/cuijiying/article/details/146189798

版权

mapbox-gl集锦专栏收录该内容

17 篇文章

订阅专栏

下面提供一个完整的 HTML 示例代码，展示了如何使用 mapbox-gl 的 Popup。代码中包含了两种使用方式：

在地图加载时直接创建一个 Popup；
结合 Marker，在点击 Marker 或地图任意位置时显示 Popup。

请确保将 YOUR_MAPBOX_ACCESS_TOKEN 替换为你自己的 Mapbox 访问令牌。下面是代码和详细讲解：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapbox GL JS Popup Demo</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <!-- 引入 Mapbox GL JS 的 CSS 和 JS 文件 -->
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // 1. 设置 Mapbox 的访问令牌（必填）
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    // 2. 初始化地图
    var map = new mapboxgl.Map({
      container: 'map', // HTML 中容器的 id
      style: 'mapbox://styles/mapbox/streets-v11', // 使用的地图样式
      center: [116.404, 39.915], // 地图中心坐标，此处设置为北京的经纬度
      zoom: 10 // 缩放级别
    });

    // 3. 创建一个 Popup 并添加到地图上
    // 此处创建的 Popup 会在地图加载时固定显示在指定位置
    var popup = new mapboxgl.Popup({ 
      closeButton: true,   // 显示右上角的关闭按钮
      closeOnClick: true   // 当点击地图其他区域时关闭 Popup
    })
      .setLngLat([116.404, 39.915]) // 设置 Popup 出现的位置（经度，纬度）
      .setHTML('<h3>欢迎来到北京!</h3><p>这里是Popup示例。</p>') // 设置 Popup 显示的 HTML 内容
      .addTo(map); // 将 Popup 添加到地图中

    // 4. 结合 Marker 使用 Popup
    // 在 Marker 上绑定 Popup，点击 Marker 时会弹出 Popup
    var marker = new mapboxgl.Marker()
      .setLngLat([116.404, 39.915]) // Marker 的坐标
      .setPopup(
        new mapboxgl.Popup({ offset: 25 }) // 可选：设置 Popup 与 Marker 的偏移量
          .setHTML('<h3>Marker Popup</h3><p>点击Marker弹出的信息。</p>')
      )
      .addTo(map);

    // 5. 地图点击事件示例：点击地图任意位置时显示 Popup
    map.on('click', function(e) {
      new mapboxgl.Popup()
        .setLngLat(e.lngLat) // Popup 显示在鼠标点击的位置
        .setHTML(
          '<p>你点击了地图！</p>' +
          '<p>经度: ' + e.lngLat.lng.toFixed(4) + '<br/>' +
          '纬度: ' + e.lngLat.lat.toFixed(4) + '</p>'
        )
        .addTo(map);
    });
  </script>
</body>
</html>

代码讲解

引入资源
- 在 <head> 部分引入了 Mapbox GL JS 的 CSS 与 JavaScript 文件，这两者都是使用 Mapbox 功能的前提。
- 设置简单的 CSS，确保地图容器 #map 占据全屏。
设置访问令牌
- mapboxgl.accessToken 必须设置为你自己的 Mapbox 访问令牌，否则地图不会加载。
初始化地图
- 使用 new mapboxgl.Map({...}) 创建地图实例，其中：
  - container 指定了地图将要渲染的 HTML 元素 id。
  - style 指定地图样式，这里使用 Mapbox 官方提供的 streets-v11。
  - center 设置地图初始中心位置，经纬度顺序为 [longitude, latitude]。
  - zoom 设置地图缩放级别。
直接添加 Popup
- 创建一个 Popup 实例，传入配置对象，可以控制是否显示关闭按钮以及点击地图时是否关闭 Popup。
- 使用 setLngLat() 方法指定 Popup 出现的位置。
- 通过 setHTML() 方法设置 Popup 显示的内容，内容支持 HTML 标签。
- 调用 addTo(map) 方法将 Popup 添加到地图上，完成显示。
Marker 与 Popup 绑定
- 创建 Marker 使用 new mapboxgl.Marker()，设置 Marker 的位置。
- 使用 setPopup() 方法给 Marker 绑定一个 Popup，这样点击 Marker 时会自动弹出该 Popup。
- Marker 也需要调用 addTo(map) 添加到地图上。
点击地图显示 Popup
- 利用 map.on('click', function(e){ ... }) 为地图添加点击事件监听器。
- 当点击地图时，获取事件对象 e 中的 lngLat 属性，即点击处的经纬度。
- 创建新的 Popup，设置其位置为点击的位置，并显示点击的经纬度信息。