navigator.geolocation.getCurrentPosition(success=>{ console.log(success.coords)//包含位置的经纬度、速率、海拔、经纬度精度、海拔精度信息},fail=>{ console.log(fail)//获取失落败的缘故原由},{ //可增加的4个配置参数 enableHighAccuracy:true,//高精度 timeout:5000,//超时时间,以ms为单位 maximumAge:2460601000,//位置缓存韶光,以ms为单位})
位置获取成功后返回的 success.coords 的属性
coords.latitude - 纬度coords.longitude - 经度coords.altitude - 海拔coords.speed - 速率coords.accuracy - 经纬度精度coords.altitudeAccuracy - 海拔精度coords.heading - 方向,从正北开始的弧度数watchPosition:不断获取位置
navigator.geolocation.watchPosition( success=>{ console.log(success.coords)//包含用户位置速率海拔等信息 }, fail=>{ console.log(fail)//定位失落败缘故原由 }, { enableHighAccuracy:true,//高精度 timeout:601000,//超时,以ms为单位 maximumAge:2460601000,//位置缓存韶光,以ms为单位 frequency:1000,//获取频率 })
位置获取成功后返回的 success.coords 的属性与上述getCurrentPosition的同等。它两唯一的差异便是一个获取一次,其余一个获取多次,多了一个获取频率参数。
clearWatch(): 取消当前位置的获取,停滞 watchPosition 方法。
clearWatch 与 js 中的clearInterval类似,clearInterval用于打消定时器。利用时语法如下:
var wPId = navigator.geolocation.watchPosition( success=>{ console.log(success.coords)//包含用户位置速率海拔等信息 }, fail=>{ console.log(fail)//定位失落败缘故原由 }, { enableHighAccuracy:true,//高精度 timeout:601000,//超时,以ms为单位 maximumAge:2460601000,//位置缓存韶光,以ms为单位 frequency:1000,//获取频率 })navigator.geolocation.clearWatch(wPId)
Geolocation 运用
由于该特性可能陵犯用户的隐私,利用时自动会讯问用户是否赞许授权位置,除非用户赞许,否则无法获取到用户位置。
function getPosition(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(res){ console.log("res",res)//位置信息 },function(err){ console.log("err",err) }) }}getPosition()
在电脑上,直策应用浏览器打开文件,浏览器立马弹出如下显示框:
点击禁止后,调试器中打印出报错信息,报错信息为:
{code: 1message: "User denied Geolocation" //用户谢绝地理位置}
点击许可之后,创造并未打印出位置信息,什么缘故原由呢?PC是根据电脑的IP地址来解析位置的,此时直接打开文件没有域名或ip,以是无法获取位置,必须把文件放到做事内,如果你是不会起做事可以下载nginx,下载安装成功之后文件放入html文件夹内,启动nginx就可以访问了。
启动本地做事,再次获取位置之后,创造依旧报错,无法返回位置,报错信息为:
{ code: 1, message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."//只许可安全来源}
意思便是只能在https域名下才可以哦!
还须要把稳的是chrome的google浏览器也不能获取位置,但是IE浏览器可以获取到。
把上述案例放到线上,获取位置只要用户点击赞许就没有问题啦!
除此之外,带有位置的我们常常会用到输入位置,在舆图中自动标记一个点,移动标记点到更详细的位置,如图:
一样平常须要绘制舆图的时候,我们就借助三方的百度、高德、腾讯等舆图,注册账号,申请密钥才可以利用。有空了可以去多看看,多理解理解!