html5 geolocation地理位置
2012-02-17 21:36
183 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html5 geolocation</title> <link href="css/html5.css" rel="stylesheet" type="text/css"> </head> <body> <span id="support">请将下面的经纬度输入谷歌地图:</span> <div id="show"> 纬度:<span id="latitude"></span><br /> 经度:<span id="longitude"></span><br /> 准确度:<span id="accuracy"></span> </div> <script type="text/javascript"> var doc = document, latitude = doc.getElementById('latitude'), longitude = doc.getElementById('longitude'), accuracy = doc.getElementById('accuracy'), support = doc.getElementById('support'), showDiv = doc.getElementById('show'); function lodeSupport(){ if(navigator.geolocation){ support.innerHTML = '同意共享地址,然后将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置:'; showDiv.style.display = 'block'; navigator.geolocation.getCurrentPosition(updataPosition); }else{ support.innerHTML = '垃圾浏览器不支持,赶快换吧!'; showDiv.style.display = 'none'; } } function updataPosition(position){ var latitudeP = position.coords.latitude, longitudeP = position.coords.longitude, accuracyP = position.coords.accuracy; latitude.innerHTML = latitudeP; longitude.innerHTML = longitudeP; accuracy.innerHTML = accuracyP; } window.addEventListener('load', lodeSupport , true); </script> </body> </html>
geolocation是window.navigator新增的一个属性,它有<strong>3个方法</strong>:
1.getCurrentPosition(successF, errorF, options)--一次性获取当前地理位置;
2.watchCurrentPosition(successF, errorF, options)--持续获取;
3.clearWatch(watchID)--清除持续获取,类似清楚clearInterval;
上边的例子用到了第一个方法,第一个方法和第二个方法参数是一样的,下面说下<strong>3个参数</strong>:
(1)successF(position)--此参数为3个参数中唯一一个必选的
获取位置成功后返回的方法。这个方法传入一个位置对象(position),我们所需要的经纬度、准确度都是通过这个对象的coords坐标属性取得的(除了时间戳timestamp直接由position获取,其他一些属性如海拔等都有position.coords获取)。
(2)errorF(error)
获取位置失败执行的方法。该方法传入一个错误对象(error),通过error.code的可得知是什么错误(code值为1是用户拒绝共享位置;2是获取不到位置;3是超时错误;0表示不属于前3种情况的错误);通过error.message获取具体信息。
(3)options
以josn对象格式传入高精度、超时时间、缓存时间参数{timeout:3000, maximumAge:60*1000*2}
上面的例子值传入了第一个参数。
附加通过经纬度求2地距离方法
Number.prototype.toRadians = function() { return this * Math.PI / 180; } function distance(latitude1, longitude1, latitude2, longitude2) { // R is the radius of the earth in kilometers var R = 6371; var deltaLatitude = (latitude2-latitude1).toRadians(); var deltaLongitude = (longitude2-longitude1).toRadians(); latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); var d = R * c; return d; }
相关文章推荐
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用【转】
- Html5 Geolocation获取地理位置信息
- HTML5 Geolocation(地理定位)用于定位用户的位置
- html5 Geolocation(地理位置定位)学习
- HTML5 - 使用Geolocation(地理定位)获取用户的位置
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- 利用HTML5中Geolocation获取地理位置在Google Map上定位
- HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法
- [HTML5 特效] HTML5 geolocation功能确定你当前所在的地理位置
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 地理位置定位(HTML5 Geolocation)
- 基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)
- HTML5 中 Geolocation 获取地理位置的原理是什么?
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- HTML5 geolocation API 获得用户当前地理位置 推荐
- HTML5 地理位置定位(HTML5 Geolocation)
- 基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- HTML5 Geolocation(地理位置)
- 利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位