HTML5 地理定位

通常在Web開發中，常使用的地理定位方式有IP地址、GPS、WIFI、CDMA/GSM。

在新增的H5 WEB API中支持使用Geolocation對象獲取當前的位置信息。

Navigator.geolocation只讀屬性返回一個Geolocation對象，通過這個對象可以訪問到設備的位置信息。使網站或應用可以根據用戶的位置提供個性化結果。

 

//step1：判斷瀏覽器是否支持
if (navigator.geolocation)
{
    alert('您的瀏覽器支持HTML5地理定位');
}
else{
    alert('您的瀏覽器不支持geolocation定位！');
}

getCurrentPosition()函數會異步地請求獲取用戶位置，並查詢定位硬件來獲取最新信息。

//step1：判斷瀏覽器是否支持
if (navigator.geolocation){
    //step 2：調用 getCurrentPosition() 函數獲取用戶當前位置。
    navigator.geolocation.getCurrentPosition(
        function(ev){//step3：用經緯度描述具體位置
            document.getElementById('geo').innerHTML = '緯度：'+ev.coords.latitude+' 經度：'+ev.coords.longitude;
        },
        function(err){
            document.getElementById('geo').innerHTML = err.code+':'+err.message;
        })
}else{
    alert('該瀏覽器不支持');
}

出於安全考慮，當網頁請求獲取用戶位置信息時，用戶會被提示進行授權。

注意不同瀏覽器在請求權限時有不同的策略和方式。Windows10在未開啟定位的情況下無法獲取位置

當然，也有可能看的以下提示

 

 如果翻牆后，該問題任未解決，建議使用IP反查。

默認情況下，getCurrentPosition()會盡快返回一個低精度結果，這在不關心准確度只關心快速獲取結果的情況下很有用。（em？那要獲取高精度的定位結果呢？詳見文末總結↓）

 當然，正常的Web應用很少是直接顯示經緯度兩個數字，而是顯示地圖展示定位。

像這樣：

 

當然我們不可能自己碼個地圖出來，造輪子的工作已經有人做好了，在此以百度地圖為例。

訪問百度地圖API SDK，申請一個開發者秘鑰即可。

 

 

 

 該步驟按照引導就能迅速完成，在此不過多贅述。直接上完整代碼：

    var geo = document.getElementById('info');
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(
            function(ev){

                var latitude = ev.coords.latitude;
                var longitude =ev.coords.longitude;
                geo.innerHTML = '緯度：'+latitude+' 經度：'+longitude;
                createMap(latitude,longitude);
            },
            function(error){
                switch(error.code)
                {
                    case error.PERMISSION_DENIED:
                        geo.innerHTML="用戶拒絕共享地理位置信息"
                        break;
                    case error.POSITION_UNAVAILABLE:
                        geo.innerHTML="無法獲取當前位置"
                        break;
                    case error.TIMEOUT:
                        geo.innerHTML="操作超時"
                        break;
                    case error.UNKNOWN_ERROR:
                        geo.innerHTML="其他錯誤"
                        break;
                }
            })
    }
    else{
        alert('該瀏覽器不支持');
    }
    //創建一個百度地圖
    function createMap(a,b){
        var map = new BMap.Map('allmap');//創建Map實例
        var point = new BMap.Point(b,a); //經度緯度定位一個中心點,初始化地圖
        map.centerAndZoom(point,20);     //設置中心點坐標和地圖級別
        map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
        //map.setCurrentCity("太原");       // 設置地圖顯示的城市 此項是必須設置的
        map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
        window.map = map;//將map變量存儲在全局

    }

完結：在此只對Web地理做了一個入門學習介紹，其實geolation對象還提供了watchPosition()函數，它可返回更高精度的地理位置信息，適合移動設備。

轉自https://www.cnblogs.com/laoli-note/p/11484119.html