JavaScript点击地图更新全局变量latitude、longitude弹出undefined如何解决

核心原因 #

你的全局变量赋值逻辑本身没有问题，现在输出undefined是代码执行顺序和事件触发机制导致的：

• 你写的alert(latitude)是页面初始化、绑定完地图点击事件后立刻同步执行的，这时候用户还没有点击过地图，onMapClick回调函数从来没有被触发过，两个全局变量自然还停留在声明后未赋值的undefined状态。

验证赋值逻辑生效的方法 #

你可以在onMapClick函数内部赋值完成后，打印两个变量的值，点击地图后就可以看到变量已经被正确更新：

function onMapClick(e) {
  popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
  latitude = e.latlng.lat;
  longitude = e.latlng.lng;
  // 新增：赋值完成后打印/使用变量
  console.log('纬度', latitude)
  console.log('经度', longitude)
}

其他业务逻辑调用这两个变量的正确方式 #

所有依赖latitude、longitude的业务逻辑，都要保证在地图点击事件触发、变量赋值完成后再执行，常见的实现方式有两种：

• 把依赖坐标的业务逻辑封装成函数，直接在onMapClick赋值完成后调用该函数

// 封装你的业务逻辑
function handleLocation() {
  // 这里写需要用到latitude、longitude的业务代码
  alert(`当前坐标：${latitude}, ${longitude}`)
}

function onMapClick(e) {
  popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
  latitude = e.latlng.lat;
  longitude = e.latlng.lng;
  // 赋值完成后调用业务逻辑
  handleLocation()
}

• 如果你的业务逻辑是由其他交互触发（比如点击某个按钮提交坐标），可以在触发时先判断变量是否有值，再执行后续逻辑：

document.getElementById('submitBtn').addEventListener('click', function() {
  if (!latitude || !longitude) {
    alert('请先点击地图选择位置')
    return
  }
  // 后续业务逻辑
})

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