天文定位是HTML5中新增的API个性,它容许JavaScript程序向浏览器询问用户实在的地理位置。辨认地理位置的一些利用就能够应用它来显示地图、导航和其它一些与用户以后地位无关的信息。当然,思考到用户的隐衷,反对天文定位API的浏览器在JavaScript程序获取用户物理地位前总是会询问用户是否容许获取以后地位。
navigator.geolocation
反对地理位置API的浏览器会定义 navigator.geolocation属性,用于获取用户的地位信息。此属性领有以下办法:
- navigator.geolocation.getCurrentPosition() 获取用户以后的地位。该办法须要承受一个回调函数作为参数,如果这个办法胜利则返回的天文数据对象,该对象蕴含了用户地理位置的信息,信息内容大略为:
coords.latitude 用户地理位置的十进制纬度
coords.longitude 用户地理位置的十进制经度
coords.accuracy 用户地理位置的 地位精度 以米为单位
coords.altitudeAccuracy 用户地理位置的 地位海拔精度 以米为单位
coords.heading 用户设施以后挪动的角度方向,以正北方向顺时针计算。
coords.speed 用户以后的 挪动速度 以米为单位
timestamp 响应的工夫/日期
- navigator.geolocation.watchPosition() 该办法用于获取以后地位,同时一直地监督以后地位,一旦用户的地理位置发生变化,就会调用指定的回调函数。
- navigator.geolocation.clearWatch() 该办法用于进行监督用户的地位。传递给此办法的参数 该当是调用watchPosition()办法的返回值。
在蕴含GPS的设施上,通过GPS单元能够获取准确的地理位置。大多数状况下是通过web来获取地位的,当浏览器提供Internet I给web服务时,这个服务就能确定这个IP所属的城市。同时浏览器还能够申请操作获取这个IP左近的无线网络列表和信号强度,用于失去更加准确的地位信息。将这些信息将于高级web服务时,容许更加精准地计算地位。
这个此地理位置相干的技术蕴含通过网络数据交换或卫星之间的通信,因而地理位置API是异步的。
navigator.geolocation.getCurrentPosition()和 navigator.geolocation.watchPosition()这两个办法通过接管两个参数: 第一个参数是一个回调函数,即当这个办法申请胜利时,就会调用这个回调函数,这个回调函数蕴含了用户地位的信息。也就是 回调函数的参数对象能够拜访这些地位信息。 第二个参数是在这两个办法失败时调用的回调函数。
在调用这三个办法前,咱们该当书写一段代码用于浏览器判断是否反对navigator.getlocation这个属性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF"></script> <style> #demo { height: 100%; } </style></head><body> <div id="demo"></div> <input id="but" type="button" value="点击获取以后地位"></body><script> var but = document.getElementById("but"); var x = document.getElementById("demo"); but.onclick = function () { //首先是判断浏览器是否反对geolocation属性 if (navigator.geolocation) { //开始申请地理位置信息。 navigator.geolocation.getCurrentPosition(succFunction, errFunction); } else { x.innerHTML = "此浏览器不反对geolocation属性"; } }; //当getCurrentPosition()办法胜利时调用的回调函数 function succFunction (position) { //失去地理位置信息 var latitude = position.coords.latitude; //十进制纬度 var longitude = position.coords.longitude; //十进制经度 var accuracy = position.coords.accuracy; //地位精度,以米为单位 console.log("用户的地位:" + latitude + "," + longitude); console.log("用户地理位置:" + accuracy); //创立百度地图实例 var map = new BMap.Map("demo"); //创立地图实例 var point = new BMap.Point(latitude, longitude); //创立点坐标 map.centerAndZoom(point, 15); //初始化地图,设置核心坐标和地图级别 } //当getCurrentPosition()办法不胜利时 function errFunction (err) { //错误信息 var err = err.code + ":" + err.message; alert(err); } </script></html>其中,位于BMap命名空间下的Map类示意地图,通过new操作符能够创立一个地图实例。其参数能够是元素id也能够是元素对象(这里是container)。地图增加到demo容器里,所以要确保demo容器在页面有宽和高,所以设置了style,如上,ak是你申请的秘钥。
watchPosition()获取以后地位,并持续返回用户挪动时更新的地位信息。注:须要具备GPS的设施测试。
<script> var but = document.getElementById("but"); var x = document.getElementById("demo"); but.onclick = function () { //首先是判断浏览器是否反对geolocation属性 if (navigator.geolocation) { //开始申请地理位置信息。 navigator.geolocation.watchPosition(succFunction); } else { x.innerHTML = "此浏览器不反对geolocation属性"; } }; //当watchPosition()办法胜利时调用的回调函数 function succFunction (position) { //失去地理位置信息 var latitude = position.coords.latitude; //十进制纬度 var longitude = position.coords.longitude; //十进制经度 var accuracy = position.coords.accuracy; //地位精度,以米为单位 x.innerHTML = "latitude:" + latitude + "<br>" + "longitude:" + longitude; console.log("用户的地位:" + latitude + "," + longitude); console.log("用户地理位置:" + accuracy); } </script>
HTML5中天文定位API的实现须要把握的常识:
- 天文定位API属性是navigator.geolocation。
- 属性领有的办法有三个:getCurrentPositoin()办法用于获取用户以后地位,watchPosition()办法用于监督用户地位,它不仅获取以后地位,还返回用户挪动后的地位信息,clearWatch()办法用于进行用于监督,它接管的参数是watchPosition()办法的返回值。getCurrentPosition()和watchPosition()办法接管两个参数:办法胜利时调用的回调函数和办法失败时调用的回调函数,回调函数的参数是参数对象,该对象蕴含了用户地位的以下信息:
1、coords.latitude 十进制纬度
2、coords.longitude 十进制经度
3、coords.accuracy 用户地理位置精度 以米为单位
4、coords.altitude 海拔高度 以米为单位
5、coords.heading 用户设施挪动的方向,以 正北方顺时针角度开始计算
6、coords.speed 用户挪动的速度 以 米/每秒 计算
地理位置获取流程:
1、关上须要获取地位的web利用。
2、利用向浏览器申请地理位置,询问用户是否容许获取以后地位信息。
3、如果用户容许,浏览器从设施上获取信息。
4、浏览器将获取到的信息发送到一个信赖的地位服务器,服务器返回地理信息。
HTML5天文定位的实现:1、实现基于浏览器(无需后端反对)获取用户的地理位置信息技术。2、精确定位用户的地理位置。3、继续追踪用户的地理位置(watchPosition())
4、须要与Google Map 、Baidu Map交与出现地位信息。
应用HTML5中的天文定位API须要用地图API,百度地图API参考: 百度地图API
百度地图开放平台参考: 百度地图开放平台
须要在一个script中引入地图API:<script src="http://api.map.baidu.com/getscript?v=2.0&ak=您的密钥"></script>
其中,ak示意密钥,密钥须要本人创立