1. 程式人生 > >Web 端獲取地理位置

Web 端獲取地理位置

HTML5 Geolocation API

if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {
        var latitude  = position.coords.latitude;
        var longitude = position.coords.longitude;
        alert('h5定位成功: latitude:' + latitude + "  longitude:" + longitude);
      }, function(error) {
        switch(error.code){
          case error.TIMEOUT:
             alert('超時'); break;
          case error.PERMISSION_DENIED:
             alert('使用者拒絕提供地理位置');break;
          case error.POSITION_UNAVAILABLE:
             alert('地理位置不可用');break;
          default:break;
         }
     })
}

備註:

1、Chrome瀏覽器從50版本開始,http協議的網址是不能用了。控制檯會有這樣的提示:
       getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
       各類瀏覽器支援性不好
   2、移動端支援性不是特別好,經測試:大部分安卓手機不支援,ios的支援度還可以

百度地圖web ip定位(用空試下騰訊地圖)

第一步:申請金鑰(ak),作為訪問服務的依據

  提交後可獲取相應的 ak 祕鑰

第二步:引入js,上程式碼

  Js:

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的金鑰"></script>
function getCity() {
    var geoc = new BMap.Geocoder();
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var pt = r.point;
            geoc.getLocation(pt, function (rs) {
              //addComp.province city district street streetNumber
              var addComp = rs.addressComponents; 
            });
        } else {
            console.log('failed' + this.getStatus());
        }   
    }, { enableHighAccuracy: true });
}

​