手把手教你：用HTML5获取用户位置并显示具体地址

引言

现在很多网站和应用都需要知道用户在哪里，比如找附近的店铺、叫外卖、查看本地天气或者分享位置。html5提供了一个方便的功能，可以直接在浏览器里获取用户的地理位置，不需要额外安装什么。这篇文章会一步步教你如何用简单的代码实现这个功能，包括获取经纬度和转换成具体的地址文字。

重要前提：用户同意是关键

首先必须明白，获取用户位置需要得到用户的明确同意。当你的代码尝试获取位置时，浏览器会弹出一个提示框询问用户是否允许。这是出于对用户隐私的保护。用户可以选择允许或拒绝。另外，这个功能通常要求你的网页是通过 https:// 安全协议访问的，本地测试(localhost 或 file://)一般没问题，但部署到线上强烈建议使用HTTPS。

第一步：检查浏览器是否支持

不是所有老旧的浏览器都支持这个功能。所以，我们第一步要先检查用户的浏览器行不行。

function getLocation() {
  if (navigator.geolocation) {
    // 浏览器支持，可以尝试获取位置
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    // 浏览器太老，不支持
    alert("很抱歉，您的浏览器不支持地理定位功能。请考虑升级浏览器。");
  }
}

navigator.geolocation：这是浏览器提供的对象，有它就说明支持定位功能。
getCurrentPosition(successCallback, errorCallback, options)：这是核心方法，用于请求当前位置。
- successCallback：获取位置成功时调用的函数，会传入一个包含位置信息的对象。
- errorCallback：获取位置失败时调用的函数，会传入一个错误对象。
- options (可选)：可以设置一些参数，比如超时时间、要求高精度等（本文示例未使用）。

第二步：成功获取位置（经纬度）

当用户同意且浏览器成功获取到位置后，就会调用我们准备好的 showPosition 函数。这个函数会收到一个 position 对象，里面藏着我们需要的信息。

function showPosition(position) {
  console.log("完整位置信息:", position); // 可以在开发者工具控制台查看所有信息

  // 从位置对象中提取纬度和经度
  var latitude = position.coords.latitude;  // 纬度
  var longitude = position.coords.longitude; // 经度

  console.log('纬度: ' + latitude + ', 经度: ' + longitude);

  // 通常，我们会在这里做点事情，比如显示在地图上，或者调用下一步的地址转换
  // 例如: convertToAddress(latitude, longitude);
}

position.coords.latitude：用户位置的纬度。
position.coords.longitude：用户位置的经度。
position.coords 对象还可能有其他信息，比如精度(accuracy)、海拔(altitude)等，但纬度和经度是最基本也最可靠的。

第三步：处理可能出现的错误

获取位置可能会失败，原因有很多。我们需要准备好处理这些情况的函数 showError。

function showError(error) {
  console.warn("定位错误 (CODE: " + error.code + "):", error.message);

  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("定位失败：您拒绝了位置共享请求。请检查浏览器设置或页面权限。");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("定位失败：暂时无法获取您的位置信息。可能是网络问题或定位服务（如手机GPS）未开启。");
      break;
    case error.TIMEOUT:
      alert("定位失败：获取位置信息超时。请确保网络畅通并重试。");
      break;
    case error.UNKNOWN_ERROR:
      alert("定位失败：发生未知错误。请稍后再试。");
      break;
  }
}

error.code：错误代码，告诉我们具体是什么原因失败。
error.message：更详细的错误描述（主要用于开发调试）。
通过 switch 语句，我们可以根据不同的错误代码，给用户更友好、更明确的提示。

第四步：将经纬度转换成具体地址（反向地理编码）

光有经纬度数字对用户来说不够直观。我们需要把它转换成“XX省XX市XX路XX号”这样的文字地址。这叫做“反向地理编码”。浏览器本身不提供这个功能，我们需要借助地图服务商的api。这里分别介绍百度和谷歌地图的API使用方法（都需要申请API密钥Key）。

重要提示：

必须申请API Key： 使用百度或谷歌的地图API都需要注册开发者账号并申请一个专属的Key（通常叫AK或API Key），替换下面代码中的 YOUR_BAIDU_API_KEY 和 YOUR_GOOGLE_API_KEY。没有有效的Key，API调用会失败。
加载jquery： 下面的示例使用了jQuery的 $.ajax 方法发起网络请求，所以你的页面需要先引入jQuery库（例如：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>）。
HTTPS限制： 谷歌地图API强烈要求使用HTTPS。百度API在HTTPS下也更安全可靠。

1. 使用百度地图API

function convertToAddressWithBaidu(lat, lng) {
  // 拼接经纬度字符串
  var latlon = lat + ',' + lng;

  // 构建请求百度API的URL (替换 YOUR_BAIDU_API_KEY 为你的真实Key)
  var baiduUrl = "https://api.map.baidu.com/reverse_geocoding/v3/?ak=YOUR_BAIDU_API_KEY&output=json&coordtype=wgs84ll&location=" + latlon;

  // 发起请求
  $.ajax({
    type: "GET",
    dataType: "jsonp", // 百度API通常使用JSONP跨域
    url: baiduUrl,
    success: function(data) {
      console.log("百度API返回:", data);
      if (data.status === 0) { // 百度API状态码0表示成功
        var formattedAddress = data.result.formatted_address; // 结构化地址
        console.log('百度解析地址:', formattedAddress);
        // 显示在页面上某个元素里，例如 id="address-result"
        $("#address-result").text(formattedAddress);
      } else {
        console.error('百度API错误:', data.message);
        $("#address-result").text("地址解析失败: " + data.message);
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error("百度API请求失败:", textStatus, errorThrown);
      $("#address-result").text("请求地址服务失败，请检查网络或Key。");
    }
  });
}

coordtype=wgs84ll：指定传入的经纬度是标准的WGS84坐标（GPS使用的标准）。
data.result.formatted_address：百度API返回的结构化地址字符串。

2. 使用谷歌地图API

function convertToAddressWithGoogle(lat, lng) {
  // 拼接经纬度字符串
  var latlon = lat + ',' + lng;

  // 构建请求谷歌Geocoding API的URL (替换 YOUR_GOOGLE_API_KEY 为你的真实Key)
  var googleUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlon + "&language=zh-CN&key=YOUR_GOOGLE_API_KEY";

  // 发起请求
  $.ajax({
    type: "GET",
    dataType: "json", // 谷歌API支持CORS，可以用json
    url: googleUrl,
    success: function(data) {
      console.log("谷歌API返回:", data);
      if (data.status === "OK") { // 谷歌API状态"OK"表示成功
        // 通常第一个结果是最精确的地址
        var formattedAddress = data.results[0].formatted_address;
        console.log('谷歌解析地址:', formattedAddress);
        // 显示在页面上某个元素里，例如 id="address-result"
        $("#address-result").text(formattedAddress);
      } else {
        console.error('谷歌API错误:', data.status, data.error_message);
        $("#address-result").text("地址解析失败: " + (data.error_message || data.status));
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error("谷歌API请求失败:", textStatus, errorThrown);
      $("#address-result").text("请求地址服务失败，请检查网络或Key。");
    }
  });
}

language=zh-CN：指定返回结果的语种为简体中文。
data.results[0].formatted_address：谷歌API返回的第一个（通常也是最相关的）地址的格式化字符串。

如何使用转换函数

在 showPosition 函数成功获取到 latitude 和 longitude 后，就可以调用上面任何一个转换函数了：

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  console.log('纬度: ' + lat + ', 经度: ' + lng);

  // 选择使用百度或者谷歌的转换函数
  convertToAddressWithBaidu(lat, lng); // 或者 convertToAddressWithGoogle(lat, lng)
}

总结与注意事项

用户授权是核心： 必须清晰地向用户说明为什么需要位置信息，并在用户拒绝时优雅处理。
HTTPS是标配： 线上环境务必使用HTTPS，否则定位功能和某些地图API可能无法正常工作。
申请API Key： 使用百度或谷歌地图服务进行地址转换是免费的（通常有配额限制），但必须注册并获取你自己的API Key，不要使用示例中的占位符。
选择合适的API： 百度地图更适合国内用户，谷歌地图全球覆盖更广。根据你的用户群体选择。
处理错误和超时： 网络请求和API调用都可能出错，做好错误处理和用户提示。
隐私政策： 如果你的网站或应用收集用户位置信息，请务必制定并遵守相关的隐私政策。
调用时机： 可以在页面加载时自动调用 getLocation()（注意用户可能反感），或者在用户点击一个按钮（如“查找附近”、“获取我的位置”）时触发，后者体验更好。

动手试试吧！

把上面的代码片段组合起来，替换掉 YOUR_BAIDU_API_KEY 或 YOUR_GOOGLE_API_KEY 为你自己申请的Key，放到一个HTML文件中，通过HTTPS服务器（或本地localhost）打开，就能看到效果了。理解每一步的原理，你就能在自己的项目中灵活运用HTML5的地理定位功能了。

链接: https://fly63.com/article/detial/12829