无URL参数的XMLHttpRequest调用：经纬度转城市名实现疑问

首先得给你泼点冷水：直接对那个geocodezip站点发起XMLHttpRequest请求，大概率是行不通的，而且就算折腾成了，也不如你之前用的谷歌API靠谱。原因如下：

• 那个站点本质是个前端演示页面，它本身并没有提供独立的反向地理编码接口——你打开它的页面源码或者开发者工具就能发现，它其实是把你输入的经纬度转发给谷歌的地理编码服务，然后把结果渲染成HTML展示出来。所以你如果直接请求这个页面，拿到的是一堆HTML代码，还要自己去解析里面的城市名，这比直接调用谷歌API麻烦10倍都不止。
• 就算你想绕过这个问题，浏览器的跨域限制也会拦住你：如果你的页面和这个站点不在同一个域名下，浏览器会直接阻止XHR请求，除非对方配置了CORS（显然这个演示站点不会做这个）。

那如果因为某些原因你必须换方案，或者就是想试试，给你个实操步骤：

• 打开目标页面，按F12打开开发者工具的「Network」标签；
• 在页面里输入一组经纬度，点击查询，观察Network面板里的请求记录；
• 找到真正获取数据的那个接口（大概率还是谷歌API，或者它自己的后端转发接口），记下它的请求方法、参数格式和请求头；
• 用XHR模拟这个请求，比如如果是POST表单提交，代码大概是这样：

const xhr = new XMLHttpRequest();
xhr.open('POST', '你找到的接口URL', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 解析返回数据，提取城市名
    const result = JSON.parse(xhr.responseText);
    console.log('获取到的城市名:', result.address.city);
  } else {
    console.error('请求失败，请检查参数或接口权限');
  }
};
// 替换成实际需要传递的参数
xhr.send(`lat=${latitude}&lng=${longitude}`);

不过说实话，我更推荐你继续用谷歌的地理编码API——毕竟你已经有可用的代码了，官方接口的稳定性和文档支持都不是这种演示站点能比的。如果谷歌API有配额或者成本问题，也可以试试OpenStreetMap的Nominatim API，免费且支持URL传参，示例代码给你参考：

const url = `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`;
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    // 不同地区返回的字段可能不同，按需调整
    const city = data.address.city || data.address.town || data.address.village;
    console.log('获取到的城市名:', city);
  }
};
xhr.send();

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