HTML5 获取地理位置

原创

已于 2022-08-15 22:27:28 修改 · 476 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #javascript

于 2022-08-15 21:56:28 首次发布

这篇博客讲述了作者尝试使用HTML5的Geolocation API获取地理位置信息，但发现无论在电脑还是手机上都无法成功。问题可能源于HTML5默认调用谷歌地图API的限制。文中提供了错误处理的代码示例，包括权限被拒绝、位置信息不可用、请求超时和未知错误四种情况的处理方法。

照搬书上案例，发现在电脑和手机上都不能成功获取地理位置。然后百度说好像是因为HTML5默认调用的谷歌的地图api，有所限制。这里暂时只添加了错误判断。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <!--用于实现页面自适应于手机-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title></title>
  <script>
    window.onload = function () {
      //获取DOM
      var oBtn = document.getElementById("btn");
      var oContent = document.getElementById("content");
      //点击按钮后，获取经度和纬度
      oBtn.onclick = function(){
        // 判断是否支持地理位置服务
        if(navigator.geolocation){  
          navigator.geolocation.getCurrentPosition(onSuccess , onError);  
        }else{  
          oContent.innerHTML = "您的浏览器不支持使用HTML5来获取地理位置服务";
        }  
        //定位数据获取成功响应