H5 Notes：Navigator Geolocation

H5的地理位置API能夠幫助咱們來獲取用戶的地理位置，經緯度、海拔等，所以咱們能夠利用該API作天氣應用、地圖服務等。

Geolocation對象是咱們獲取地理位置用到的對象。

首先判斷瀏覽器是否支持該對象

if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(success,fail,options);
}else{
    alert('瀏覽器不支持獲取地理位置！');
}

獲取用戶地理位置getCurrentPosition，該方法能夠傳三個參數success[, error[, options]]，

獲取成功就執行success回調函數並傳遞position參數，該參數包涵了coords對象，該對象內容以下所示

latitude ：緯度
longitude：經度
altitude ：海拔高度
accuracy ：精度
altitudeAccuracy ：海拔精度
speed ：外部環境的移動速度

失敗則執行error回調並帶上error參數，該參數有個code屬性，用以指示失敗的緣由，以下所示：

Value    Associated constant    Description
1    PERMISSION_DENIED    沒有權限
2    POSITION_UNAVAILABLE    位置不可用
3    TIMEOUT    獲取超時

，最後一個參數options是一個對象，能夠有三個屬性，以下所示

 enableHighAccuracy: true,  是否啓用高精度
 timeout: 5000, 超時時間
 maximumAge: 0 應用的緩存時間

下面是一個利用百度地圖的API根據經緯度獲取城市信息的小例子，因爲百度API須要key，本身須要申請一個。

var url = "http://api.map.baidu.com/geocoder/v2/?ak=cPnGmGz3euAuMCVklyz73Qa1",
    options = { 
        enableHighAccuracy:true,
        timeout: 5000,
        maximumAge: 0
    };
var script = document.createElement('script');
script.type = "text/javascript";

function dealResult(data){
    alert(JSON.stringify(data));
}

function success(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    url = url + '&location=' + latitude + ',' + longitude + '&output=json&pois=1&callback=dealResult';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

function fail(error){
    switch(error.code){
        case error.PERMISSION_DENIED:
            console.log('沒有獲取位置信息的權限');
            break;
        case error.POSITION_UNAVAILABLE:
            console.log('位置信息不可用');
            break;
        case error.TIMEOUT:
            console.log('獲取位置信息超時');
            break;
    }
}
if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(success,fail,options);
}else{
    alert('瀏覽器不支持獲取地理位置！');
}

獲取到的城市信息以下所示：

{
    "status": 0,
    "result": {
        "location": {
            "lng": 114.05751299999999,
            "lat": 22.64580900174618
        },
        "formatted_address": "廣東省深圳市寶安區東環二路50",
        "business": "民治,龍華,潛龍花園",
        "addressComponent": {
            "country": "中國",
            "country_code": 0,
            "province": "廣東省",
            "city": "深圳市",
            "district": "寶安區",
            "adcode": "440306",
            "street": "東環二路",
            "street_number": "50",
            "direction": "西北",
            "distance": "57"
        },
        "pois": [
            {
                "addr": "東環二路49號附近",
                "cp": " ",
                "direction": "附近",
                "distance": "27",
                "name": "靖軒龍華工業園",
                "poiType": "公司企業",
                "point": {
                    "x": 114.05727565178965,
                    "y": 22.64585864640103
                },
                "tag": "公司企業;園區",
                "tel": "",
                "uid": "51b3387b26aed6235fd4fe81",
                "zip": ""
            },
            {
                "addr": "富豪新村二巷附近",
                "cp": " ",
                "direction": "西南",
                "distance": "200",
                "name": "水斗富豪新村",
                "poiType": "房地產",
                "point": {
                    "x": 114.058515313393,
                    "y": 22.647201155091143
                },
                "tag": "房地產;住宅區",
                "tel": "",
                "uid": "141109be59d277b83686f44c",
                "zip": ""
            },
            {
                "addr": "深圳市寶安區",
                "cp": " ",
                "direction": "附近",
                "distance": "45",
                "name": "陽光蕾幼兒園",
                "poiType": "教育培訓",
                "point": {
                    "x": 114.05716785512848,
                    "y": 22.646017079794483
                },
                "tag": "教育培訓;幼兒園",
                "tel": "",
                "uid": "56c496efcbce5bdcbabd63e0",
                "zip": ""
            },
            {
                "addr": "深圳市龍華新區東環一路",
                "cp": " ",
                "direction": "南",
                "distance": "75",
                "name": "鳳天大廈",
                "poiType": "房地產",
                "point": {
                    "x": 114.05729361789984,
                    "y": 22.646408993183947
                },
                "tag": "房地產;寫字樓",
                "tel": "",
                "uid": "ec7ce450995433ffc1f1cf04",
                "zip": ""
            },
            {
                "addr": "深圳市龍崗區東環二路",
                "cp": " ",
                "direction": "西北",
                "distance": "115",
                "name": "國安村鎮銀行",
                "poiType": "金融",
                "point": {
                    "x": 114.0579853131423,
                    "y": 22.644949735465907
                },
                "tag": "金融;銀行",
                "tel": "",
                "uid": "26739d57c4af8c836fa3ccbc",
                "zip": ""
            },
            {
                "addr": "深圳龍華新區大浪商業中心",
                "cp": " ",
                "direction": "西北",
                "distance": "114",
                "name": "華盛大廈",
                "poiType": "房地產",
                "point": {
                    "x": 114.05802124536268,
                    "y": 22.644983090103185
                },
                "tag": "房地產;寫字樓",
                "tel": "",
                "uid": "63f36ce15aefa373b64f5407",
                "zip": ""
            },
            {
                "addr": "富豪新村二巷附近",
                "cp": " ",
                "direction": "南",
                "distance": "221",
                "name": "強記百貨廚具行",
                "poiType": "購物",
                "point": {
                    "x": 114.05808412674835,
                    "y": 22.647576388065445
                },
                "tag": "購物;家居建材",
                "tel": "",
                "uid": "7bf3c226751022e60a5cb36f",
                "zip": ""
            },
            {
                "addr": "油松東環一路一號一樓好薈品旗艦店(近和諧修車)",
                "cp": " ",
                "direction": "東南",
                "distance": "251",
                "name": "好薈品深圳旗艦店",
                "poiType": "美食",
                "point": {
                    "x": 114.05573056631299,
                    "y": 22.647101092789494
                },
                "tag": "美食;外國餐廳",
                "tel": "",
                "uid": "54ebc6e9fe4c7610095cb3d4",
                "zip": ""
            },
            {
                "addr": "寶安區東環二路藍調酒吧旁",
                "cp": " ",
                "direction": "西北",
                "distance": "284",
                "name": "水斗星幼兒園",
                "poiType": "教育培訓",
                "point": {
                    "x": 114.05889260170707,
                    "y": 22.64380733419285
                },
                "tag": "教育培訓;幼兒園",
                "tel": "",
                "uid": "0727de0c15a3e427077ce8a9",
                "zip": ""
            },
            {
                "addr": "龍華新區東環一路1號",
                "cp": " ",
                "direction": "東南",
                "distance": "217",
                "name": "一汽大衆（龍華安進譽隆店）",
                "poiType": "汽車服務",
                "point": {
                    "x": 114.05583836297416,
                    "y": 22.646742535602986
                },
                "tag": "汽車服務;汽車銷售",
                "tel": "",
                "uid": "7a3c6d6322de3dce11882495",
                "zip": ""
            }
        ],
        "poiRegions": [],
        "sematic_description": "靖軒龍華工業園附近27米",
        "cityCode": 340
    }
}

Geolocation還有兩個方法watchPosition和clearWatch，前者能夠用來檢測用戶位置的改變，只要改變便會調用該函數註冊的回調函數，並返回一個watchId，後者用於清除前者註冊的事件處理函數。

watchPosition的參數和getCurrentPosition一致，使用方法以下

id = navigator.geolocation.watchPosition(success, error, options);

clearWatch使用方法以下

navigator.geolocation.clearWatch(id);

 

 

Value	Associated constant	Description
1	PERMISSION_DENIED	The acquisition of the geolocation information failed because the page didn't have the permission to do it.
2	POSITION_UNAVAILABLE	The acquisition of the geolocation failed because at least one internal source of position returned an internal error.
3	TIMEOUT	The time allowed to acquire the geolocation, defined byPositionOptions.timeout information was reached before the information was obtained.