Leaflet地图点击事件获取经纬度并传入HTML文本输入框求助

AI 小北

2026-9-25

错误原因

表单输入框（<input>/<textarea>）的内容赋值需要用value属性，不能用innerHTML，innerHTML是用来读写普通DOM节点的HTML内容的，不适用于表单元素
innerHTML是属性不是方法，不能用innerHTML(xxx)的调用写法，正确写法是innerHTML = 内容，但本场景不需要用到这个属性

解决代码

首先确保你的HTML侧有对应id的输入框，示例结构如下：

<!-- 分开两个输入框存储经纬度的写法 -->
<input type="text" id="latInput" placeholder="点击地图获取纬度">
<input type="text" id="lngInput" placeholder="点击地图获取经度">

<!-- 单个输入框存储拼接后的经纬度的写法 -->
<!-- <input type="text" id="coordinateInput" placeholder="点击地图获取经纬度"> -->

对应JS逻辑修改如下：

分开存储经纬度到两个输入框

map.on('click', function(e) {
  const latitude = e.latlng.lat; 
  const longitude = e.latlng.lng;
  // 赋值给对应输入框
  document.getElementById('latInput').value = latitude;
  document.getElementById('lngInput').value = longitude;
});

合并存储到单个输入框

map.on('click', function(e) {
  const lat = e.latlng.lat; 
  const lng = e.latlng.lng;
  // 按需调整拼接格式即可
  document.getElementById('coordinateInput').value = `${lat}, ${lng}`;
});