如何在Leaflet中获取点击事件经纬度并返回指定格式JSON？

嘿，我来帮你搞定这个需求！要实现点击Leaflet地图获取经纬度并生成你要的JSON格式，你需要添加以下几部分JSON相关的代码逻辑：

1. 初始化存储点击记录的变量 #

首先得声明一个对象来保存所有点击的经纬度数据，再用一个计数器来生成click_1、click_2这种有序的键名：

// 存储所有点击记录的对象，最终会生成你要的JSON结构
let clickRecords = {};
// 点击计数器，每次点击自增，用来命名键名
let clickCount = 0;

2. 给Leaflet地图绑定点击事件 #

接下来要给你的Leaflet地图实例绑定click事件，每次点击时把经纬度存入我们的记录对象：

// 假设你的地图实例是`map`（你应该已经初始化过这个实例了，比如L.map('map').setView(...)）
map.on('click', function(e) {
  clickCount++;
  // 从点击事件里获取经纬度
  const latitude = e.latlng.lat;
  const longitude = e.latlng.lng;
  // 按照要求的格式把记录添加到对象中
  clickRecords[`click_${clickCount}`] = {
    latitude: latitude.toString(), // 转成字符串和示例格式匹配
    longitude: longitude.toString()
  };
});

3. 实现getJSON函数 #

最后完善你页面里的getJSON按钮对应的函数，把记录对象转换成标准JSON字符串（或者直接返回原生对象，根据你的需求来）：

function getJSON() {
  // 把记录对象转换成格式化后的JSON字符串
  const formattedJSON = JSON.stringify(clickRecords, null, 2);
  
  // 这里可以根据你的需求处理JSON，比如打印到控制台、显示弹窗或者发送到后端
  console.log('点击记录JSON:', formattedJSON);
  alert('点击记录的JSON格式如下:\n' + formattedJSON);
  
  // 如果需要把JSON返回给其他逻辑，直接return即可
  // return formattedJSON;
}

完整的代码示例（整合到你的HTML里） #

把这些代码放到<script>标签中，确保在Leaflet库加载完成、地图实例初始化之后执行：

<html>
<head>
  <!-- 引入Leaflet的CSS和JS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    #map { height: 400px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <button name="GetJSON" value="OK" type="button" onclick="getJSON()">getJSON</button>

  <script>
    // 初始化Leaflet地图
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // 初始化点击记录变量
    let clickRecords = {};
    let clickCount = 0;

    // 绑定地图点击事件
    map.on('click', function(e) {
      clickCount++;
      const latitude = e.latlng.lat;
      const longitude = e.latlng.lng;
      clickRecords[`click_${clickCount}`] = {
        latitude: latitude.toString(),
        longitude: longitude.toString()
      };
    });

    // 实现getJSON函数
    function getJSON() {
      const formattedJSON = JSON.stringify(clickRecords, null, 2);
      console.log(formattedJSON);
      alert('点击记录JSON:\n' + formattedJSON);
    }
  </script>
</body>
</html>

这样每次点击地图，经纬度就会被存入clickRecords对象，点击getJSON按钮就能得到你要的JSON格式啦！

内容的提问来源于stack exchange，提问作者Gaurav