HTML5 获取地理位置

Hillbox

已于 2022-08-15 22:27:28 修改

阅读量400

点赞数 2

分类专栏： html5 文章标签： html5 前端 javascript

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

本文链接：https://blog.csdn.net/qq_33514421/article/details/126355576

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

照搬书上案例，发现在电脑和手机上都不能成功获取地理位置。然后百度说好像是因为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来获取地理位置服务";
        }  
        //定位数据获取成功响应  
        function onSuccess(position){ 
          oContent.innerHTML = '纬度: '    + position.coords.latitude       + '\n' +  
                               '经度: '    + position.coords.longitude      + '\n' +  
                               '海拔: '    + position.coords.altitude       + '\n' +  
                               '水平精度: ' + position.coords.accuracy       + '\n' +  
                               '垂直精度: ' + position.coords.altitudeAccura;
        }  
        //定位数据获取失败响应  
        function onError(error) {  
          switch(error.code)  
          {  
            case error.PERMISSION_DENIED:  
            oContent.innerHTML =  "您拒绝对获取地理位置的请求";  
            break;  
            case error.POSITION_UNAVAILABLE:  
            oContent.innerHTML = "位置信息是不可用的";  
            break;  
            case error.TIMEOUT:  
            oContent.innerHTML = "请求您的地理位置超时";  
            break;  
            case error.UNKNOWN_ERROR:  
            oContent.innerHTML = "未知错误";  
            break;  
          }  
        }
      };
    }
  </script>
</head>
<body>
  <input id="btn" type="button" value="获取位置"/>
  <p id="content"></p>
</body>
</html>