如何为Leaflet地图添加「绘制标记」控件并捕获对应事件

开发者阿泽

2026-10-19

Leaflet 单标记添加与坐标获取实现方案

核心实现逻辑：监听地图点击事件，每次点击时清除已有标记再创建新标记，同时存储坐标值，确保全局仅保留一个有效标记。

1. 基础依赖引入与页面结构

<!-- 引入Leaflet样式文件 -->
<link rel="stylesheet" href="Leaflet官方样式资源地址" />
<!-- 引入Leaflet JS文件 -->
<script src="Leaflet官方脚本资源地址"></script>
<!-- 地图容器 -->
<div id="map" style="width: 100%; height: 600px;"></div>

2. 地图初始化配置

// 初始化地图，设置中心点和缩放层级
const map = L.map('map').setView([39.9042, 116.4074], 10);
// 添加地图底图，可替换为自定义底图源
L.tileLayer('底图服务地址模板', {
  attribution: '&copy; 底图服务商版权信息'
}).addTo(map);

// 全局变量，存储当前标记和对应坐标
let currentMarker = null;
let selectedCoords = null;

3. 单标记添加逻辑实现

// 监听地图点击事件
map.on('click', function(e) {
  // 已存在标记则先清除
  if (currentMarker) {
    map.removeLayer(currentMarker);
  }
  // 创建新标记并添加到地图
  currentMarker = L.marker(e.latlng).addTo(map);
  // 存储标记坐标
  selectedCoords = {
    latitude: e.latlng.lat,
    longitude: e.latlng.lng
  };
  // 可选：给标记绑定弹窗显示当前坐标
  currentMarker.bindPopup(`坐标：<br>纬度：${e.latlng.lat.toFixed(6)}<br>经度：${e.latlng.lng.toFixed(6)}`).openPopup();
  
  // 此处可直接调用你需要执行的其他操作，直接传入selectedCoords即可
  // yourCustomFunction(selectedCoords);
});

4. 坐标获取方式

后续需要使用标记坐标时，直接读取selectedCoords变量即可，示例如下：

// 示例：点击按钮获取已选坐标
document.querySelector('#getCoordsBtn').addEventListener('click', function() {
  if (!selectedCoords) {
    alert('请先在地图上点击放置标记');
    return;
  }
  console.log('当前选中坐标：', selectedCoords);
  // 执行你的后续业务逻辑
});