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.