html5 地理api,HTML5地理定位-Geolocation API

HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息

Geolocation API使用方法:

1.判断是否支持 navigator.geolocation

2.调用getCurrentPosition(successCallback, errorCallback, options),返回定位数据

参数说明:

参数1:successCallback 成功的回调函数,把position对象作为参数传入,position对象包含定位的相关信息

latitude 纬度数值

longitude 经度数值

speed 运动的速度(假设你在地平线上运动),单位米/秒。

accuracy 精确度单位米

altitude 高度,单位米

altitudeAccuracy 高度的精确地,单位米

heading 运动的方向,相对于正北方向的角度。

参数2:errorCallback 出错的回调函数

error.PERMISSION_DENIED: 用户拒绝对获取地理位置的请求。

error.POSITION_UNAVAILABLE: 位置信息是不可用的。

error.TIMEOUT: 请求用户地理位置超时。

error.UNKNOWN_ERROR: 未知错误。

参数3:options 选项配置

enableHighAccuracy: true 指示浏览器获取高精度的位置

timeout: 5000 指定获取地理位置的超时时间,默认不限时,单位为毫秒

maximumAge: 3000 最长有效期,即位置缓存

代码示例:

//支持html5的浏览器才可以使用Geolocation API

//console.log(navigator.geolocation);

if(navigator.geolocation){

//console.log("支持!");

//参数1:

function successFn(position) {

//latitude 纬度

//longitude 经度

console.log("position",position);

console.log(position.coords);

console.log("纬度 ",position.coords.latitude,"经度 ",position.coords.longitude);

}

//参数2:

function errorFn(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

console.log("用户拒绝对获取地理位置的请求User denied the request for Geolocation.");

break;

case error.POSITION_UNAVAILABLE:

console.log("位置信息是不可用Location information is unavailable.");

break;

case error.TIMEOUT:

console.log("用户的请求超时The request to get user location timed out.");

break;

case error.UNKNOWN_ERROR:

console.log("未知错误An unknown error occurred.");

break;

}

}

//参数3:

var options = {

// 指示浏览器获取高精度的位置

enableHighAccuracy: true,

// 指定获取地理位置的超时时间,默认不限时,单位为毫秒

timeout: 5000,

// 最长有效期,即位置缓存

maximumAge: 3000

}

//返回定位数据,如果出错返回错误信息,链接超时的配置

navigator.geolocation.getCurrentPosition(successFn,errorFn,options);

}

else{

console.log("不支持! Geolocation is not supported by this browser.");

}

注意:google浏览器在国内无法直接定位

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值