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. |