Mapbox点击地图获取经纬度并添加带标题弹窗的标记实现方案咨询

没问题！我来帮你实现Mapbox中点击地图获取经纬度、弹窗填标题并添加标记的功能，核心的点击获取经纬度其实很简单，结合Mapbox的事件监听就能搞定，下面是完整的实现方案：

实现步骤与代码示例 #

1. 基础准备（引入Mapbox资源） #

首先确保你已经引入了Mapbox的CSS和JS文件，在HTML头部添加：

<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>

（记得替换成最新版本的Mapbox GL JS哦）

2. 初始化地图 #

先创建一个地图容器，然后初始化地图：

<div id="map" style="width: 100%; height: 600px;"></div>

mapboxgl.accessToken = '你的Mapbox Access Token'; // 替换成你自己的Token
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12', // 可以替换成你喜欢的地图样式
  center: [116.397428, 39.90923], // 初始中心点，比如北京
  zoom: 10
});

3. 监听地图点击事件，获取经纬度并弹出弹窗 #

这一步是核心！通过map.on('click', callback)监听点击事件，回调参数里的e.lngLat就是你点击位置的经纬度对象：

map.on('click', (e) => {
  // 获取点击位置的经纬度
  const lng = e.lngLat.lng;
  const lat = e.lngLat.lat;

  // 创建弹窗，里面包含标题输入框和提交按钮
  const popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat([lng, lat])
    .setHTML(`
      <div style="padding: 10px;">
        <label for="marker-title">标记标题:</label>
        <input type="text" id="marker-title" placeholder="输入标题" style="width: 100%; margin: 8px 0;" />
        <button id="add-marker-btn" style="width: 100%; padding: 8px; background: #3bb2d0; color: white; border: none; border-radius: 4px;">添加标记</button>
      </div>
    `)
    .addTo(map);

  // 监听提交按钮点击事件
  document.getElementById('add-marker-btn').addEventListener('click', () => {
    const title = document.getElementById('marker-title').value.trim();
    if (title) {
      // 创建标记并添加到地图上
      new mapboxgl.Marker()
        .setLngLat([lng, lat])
        .setPopup(new mapboxgl.Popup().setHTML(`<h3>${title}</h3><p>经纬度: ${lng.toFixed(6)}, ${lat.toFixed(6)}</p>`))
        .addTo(map);
      // 关闭弹窗
      popup.remove();
    } else {
      alert('请输入标记标题哦！');
    }
  });
});

关键要点解释 #

• 获取经纬度：在click事件的回调参数e中，e.lngLat是一个包含lng（经度）和lat（纬度）的对象，直接调用即可拿到坐标。
• 弹窗交互：用Mapbox自带的Popup组件来创建弹窗，里面嵌入HTML表单实现标题输入；提交后创建Marker并绑定一个显示标题和经纬度的弹窗。
• 用户体验优化：添加了标题非空校验，避免创建无标题的标记；提交后自动关闭弹窗。

这样你就能实现点击地图获取经纬度，填写标题后添加标记的功能啦！

内容的提问来源于stack exchange，提问作者Otto Giacomello Scharnberg