地理位置服务——navigator.geolocation

    使用navigator.geolocation对象来获取位置信息，geolocation对象包含一系列相关位置操作方法需要选择IE9及以上的浏览器一般流程：1.用户从浏览器打开位置感应应用程序2.程序执行，geolocation对象获取位置信息，此时浏览器要求用户授权同意才可以获得信息3.浏览器内部通过数据源获取信息4.浏览器将获取的信息发送给受信任的外部定位服务，返回位置信息到geolocation应用程序操作方法：navigator.geolocation包含三个方法：获取当前地址信息（请求一次）getCurrentPosition(successCallback, errorCallback, positionOptions)监视当前地理位置（请求多次）watchPosition(successCallback, errorCallback, positionOptions)清除监视功能clearWatch(watchId)getCurrentPosition(successCallback, errorCallback, positionOptions)successCallback 回调函数接受一个参数：位置对象。这个对象包含坐标(coords属性)和一个获取位置数据时的时间戳coords属性：coords.latitude  十进制数的纬度coords.longitude  十进制数的经度coords.accuracy  所提供的以米为单位的经度和纬度估计的精确度coords.altitude  海拔，海平面以上以米计coords.altitudeAccuracy  所提供的以米为单位的高度估计的精确度coords.heading  宿主设备当前移动的角度方向，相对于正北方向顺时针计算coords.speed  以米每秒为单位的设备的当前对地速度timestamp  响应的日期/时间errorCallback 接受错误对象作为参数，包含code属性、message信息code属性：1. 当属性值为1时，用户不允许地理定位（拒绝授权），“Permission denied”。2. 当属性值为2时，无法获取当前位置，“Position unavailable”。3. 当属性值为3时，操作超时，“Timeout”message属性：属性值是一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用positionOptions 是一个可选属性的列表，说明如下：enableHighAccuracy : 启用高精确度模式，这个参数通知浏览器启用HTML5Geolocation : 服务的高精确度模式，默认值为falsetimeout ： 超时限制（单位为毫秒）。如果在该时间内为获取到地理位置信息，则返回错误maximumAge ： 表示浏览器重新计算位置的时间间隔，单位为ms，默认值为零，这意味着浏览器每次请求都必须重新计算位置watchPosition(successCallback, errorCallback, positionOptions)使用该方法可以定期获取用户地理位置信息，该方法与getCurrentPosition方法类似，这里调用会返回一个数字，该数字与setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视。clearWatch(watchId)如果应用程序不需要再接受watchPosition的持续位置更新，则只需要调用clearWatch()函数,watchId是watchPosition函数的返回值

代码实现：
1. 判断浏览器是否支持Geolocation API
2. 调用navigator.geolocation下的方法获取位置信息
3. 对成功或失败设置回调函数
4. 设置回调函数的输出信息

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p id="demo">点击按钮获取您当前坐标：</p><button onclick="getLocation()">按钮</button><script>var x = document.getElementById("demo");function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {x.innerHTML = "该浏览器不支持获取地理位置。";}}function showPosition(position) {x.innerHTML = "纬度: " + position.coords.latitude +"<br>经度: " + position.coords.longitude +"<br>位置精度: " + position.coords.accuracy +"<br>海拔: " + position.coords.altitude +"<br>位置的海拔精度: " + position.coords.altitudeAccuracy +"<br>方向: " + position.coords.heading +"<br>速度: " + position.coords.speed;}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:x.innerHTML = "用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:x.innerHTML = "位置信息是不可用的。"break;case error.TIMEOUT:x.innerHTML = "请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:x.innerHTML = "未知错误。"break;}}</script>
</body></html>

有兴趣的话还可以看看我的另一篇博客：地理位置服务——百度地图API

更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间

地理位置服务——navigator.geolocation相关推荐

地理位置服务——百度地图API
先去百度地图开放平台获取密钥: 获得密钥后可以在百度地图开放平台的控制台管理然后把百度地图开放平台的示例中心复制到编译器(注意将ak填上自己的密钥): 然后就可以运行自己的代码了: 以上就是申请百度 ...
navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...
ios10不能定位 window.navigator.geolocation.getCurrentPosition（定位第一节）
原文连接: https://blog.csdn.net/michael_ouyang/article/details/54137709 -------------------------------- ...
关于h5页面手机访问获取用户地理位置的功能——Geolocation位置API
Geolocation是由H5提供的新的获取用户使用的设备的地理位置的API,它可以让访问者在访问当前页面的时候,经过用户同意获取访问者当前的地理坐标位置. 此属性只能在网站为https的协议下运行 ...
windows phone7 学习笔记14——地理位置服务与反应性扩展框架
使用Location Service能帮助开发者为windows Phone 开发具备位置感知(Location-Aware)功能的应用程序.比如很多导航的软件,查找附近吃饭.娱乐甚至厕所的应用程序, ...
关于微信小程序使用腾讯地理位置服务，线上版本无法生效的问题
在项目中需要使用到地理位置服务中的通过经纬度转换为地理位置, 而在实际使用的时候,使用调试模式打开项目功能正常,但是一旦关闭调试功能,项目功能则无法实现. 本质上是由于小程序项目的安全域名没有添加上腾 ...
基于地理位置服务（LBS）技术平台
以互联网为代表的新媒体诞生以来,技术平台的更新便令人目不暇接,从最初以Blog Bus.新浪为代表的博客,发展到以人人网.开心网为代表的SNS,以及以新浪微博为代表的Twitter,各种平台的不断涌现 ...
地理位置服务带来多少新玩法
2010年之所以被称为中国移动互联网元年,是因为源自美国的Groupon(团购)和Foursquare(位置服务网站)两大网站推出的创新业务为整个互联网带来了生机. Foursquare的兴起使地理位 ...
H5地理定位navigator.geolocation的使用（获取经纬度、海拔高度等设备信息）
navigator.geolocation定位说明 getCurrentPosition,需要https加密SSL证书支持,http服务协议逐步启用: 使用PC端浏览器,部分返回的值是无法正常显示,为 ...

地理位置服务——navigator.geolocation

地理位置服务——navigator.geolocation相关推荐

最新文章

热门文章