如何在独立AJAX/API调用中复用Leaflet标记的已有经纬度

跨作用域读取经纬度的核心思路 #

不需要复杂的闭包穿透或者反向遍历标记节点，直接在模块/全局作用域定义一个独立的状态存储对象，所有城市触发的交互都从这个统一状态读写参数，改动量极小：

• 第一步在全局可访问的位置定义状态对象：

  // 存当前选中城市的核心参数，所有函数都可读取
  const currentSelectedCity = {
    lat: null,
    lng: null,
    cityName: null
  }
  

• 第二步修改原有城市标记的点击回调：不要等AJAX请求成功才存经纬度，只要用户点击了合法的城市标记，第一时间把经纬度、城市名写入currentSelectedCity，再执行原有天气请求逻辑：

  // 原标记点击逻辑修改后
  $($cityMarker).on('click', (event) => {
    const clickedMarker = event.target;
    const latLng = clickedMarker.getLatLng();
    // 第一时间更新全局选中状态
    currentSelectedCity.lat = latLng.lat;
    currentSelectedCity.lng = latLng.lng;
    currentSelectedCity.cityName = clickedMarker.getPopup().getContent();
    // 原有天气AJAX逻辑完全保留，不需要修改
    $.ajax({
      url: "getLatLngInfo.php",
      type: 'POST',
      data: { lat: latLng.lat, lng: latLng.lng },
      success: function(result) {
        // 原有按钮激活、模态框弹出逻辑保留
        console.log(result);
        $weatherButton.enable();
        $wikiButton.enable();
        $('#weather').modal('show');
      }
    })
  })
  

• 第三步给新增的easyButton绑定点击事件时，直接读取currentSelectedCity里的经纬度发请求即可，完全不需要反向获取之前的闭包参数：

  $($newCustomButton).on('click', () => {
    // 增加空值校验，避免未选城市时发空请求
    if (!currentSelectedCity.lat || !currentSelectedCity.lng) {
      alert('请先点击地图上的城市标记获取基础信息');
      return;
    }
    // 直接复用统一状态里的经纬度调用新接口
    $.ajax({
      url: "getCityExtraInfo.php",
      type: 'POST',
      data: {
        lat: currentSelectedCity.lat,
        lng: currentSelectedCity.lng
      },
      success: (res) => {
        // 新维度信息的渲染逻辑
      }
    })
  })
  

现有代码的可维护性优化建议 #

• 把散落在各个回调里的AJAX请求拆成独立的纯函数：比如封装getWeather(lat, lng)、getCityExtraInfo(lat, lng)两个通用方法，所有方法只接收经纬度入参，不依赖外层闭包变量，从根源上避免主函数越来越冗长、嵌套层级越来越深的问题。
• 修正原循环创建标记的隐患：原代码用var声明循环内的$cityMarker变量，由于var存在变量提升，循环结束后所有标记的引用都会指向最后一次循环生成的标记，容易出现事件绑定错配，建议改用let声明循环内的标记变量。
• 把easyButton的激活逻辑从AJAX的success回调里抽离：只要用户点击了合法的城市标记，就直接激活所有绑定的easyButton，不需要等异步请求返回再操作按钮状态，避免网络慢的时候按钮点不了的体验问题。
• 这种统一状态入口的方案，不会出现“点了A城市，点easyButton时拿到B城市经纬度”的错配问题，因为状态更新和用户的标记点击动作是强绑定的，和异步请求的时序无关。

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