html5 geolocation地理位置

<!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;
}
原文地址:https://www.cnblogs.com/bianyuan/p/2356460.html