·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解2:悲剧的position地理位置

时间:2017-03-06 14:13web前端教程
[html5]API详解2:悲剧的position地理位置

Position API接口

注意:由于geolocation的位置信息来源包括GPS,IP地址,wifi,蓝牙的MAC地址GSM/CDMA 卡 ID 等。移动设备优先使用GPS获取位置,但是对于wifi和IP定位,浏览器本身不能直接解析,它只能手机wifi和ip的信息,然后通过请求位置信息服务接口来获取,然后主流浏览器都是使用Google提供的地理位置查询服务。通过抓包我们可以知道浏览器会请求www.googleapis.com来获取位置信息,那么问题来了,谷歌撤出中国以后,很多Google提供的服务我们无法使用,其中就包括了地理位置查询服务,悲剧!

不过我们还是有必要来学习一下这个最受开发者青睐的API。

方法1:getCurrentPosition() 获取用户当前的位置信息,有三个参数,1.成功后的回调函数,2.失败后的回调函数,3,设置参数的对象。

方法2:watchCurrentPostion() 获取用户的位置信息,并继续返回用户移动时的更新位置,函数会返回一个 ID,唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

方法3:clearWatch(id) 取消watchCurrentPostion,参数为watchID。

 

getCurrentPosition()使用案例

if(navigator.geolocation){

//可用

//设置配置参数

getLocationOptions = {

// 指示浏览器获取高精度的位置,默认为false

enbaleHighAcuracy:true,

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

timeout:5000,

// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。

maximumAge:300

};

navigator.geolocation.getCurrentPosition(getLocationSuccess,getLocationError,getLocationOptions);

}

else{

//不可用

alert('你的浏览器不支持geolocation API的使用');

}

//成功后返回对象,包含位置信息

function getLocationSuccess(position){

console.log('纬度:'+position.coords.latitude);

console.log('经度:'+position.coords.longitude);

console.log('位置精度:'+position.coords.accuracy);

console.log('海拔:'+position.coords.altitude);

console.log('海拔精度:'+position.coords.altitudeAccuracy);

console.log('方向(正北开始以度计):'+position.coords.heading);

console.log('速度,以米/每秒计'+position.coords.speed);

console.log('响应的日期/时间'+position.timestamp);

}

//失败后返回对象,包含失败信息

function getLocationError(error){

switch (error.code){

case error.PERMISSION_DENIED : alert('用户拒绝浏览器获取位置信息');break;

case error.TIMEOUT : alert('请求超时!'); break;

case error.POSITION_UNAVAILABLE : alert('无法检测到你的位置'); break;

}

}

watchCurrentPostion()使用案例

var watchID = navigator.geolocation.watchPosition(function(position) { /*.....*/});

clearWatch(id)使用案例

navigator.geolocation.clearWatch(watchID);

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!