HTML5 获取用户经纬度及距离计算公式

最新推荐文章于 2024-04-12 08:58:42 发布

沈成才

最新推荐文章于 2024-04-12 08:58:42 发布

阅读量4.4k

点赞数 1

分类专栏： HTML5/CSS3 文章标签： html5 地图经纬度计算距离获取经纬度

本文链接：https://blog.csdn.net/u014063717/article/details/51216938

版权

HTML5/CSS3 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

在做项目时需要做定位获取经纬度并计算距离，这里使用 html5 获取经纬度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>利用html5获取经纬度</title>
</head>
<body>
<span id="support">将下面的经纬度输入谷歌地图：</span>
<div id="show">
纬度：<span id="latitude"></span><br />
经度：<span id="longitude"></span><br />
经纬度准确度：<span id="accuracy"></span><br />
海拔：<span id="altitude"></span><br />
海拔高度的精确度：<span id="altitudeAcuracy"></span><br />
朝向：<span id="heading"></span><br />
速度：<span id="speed"></span>
</div>
<script type="text/javascript">
var doc = document,
latitude = doc.getElementById('latitude'),
longitude = doc.getElementById('longitude'),
accuracy = doc.getElementById('accuracy'),
altitude = doc.getElementById('altitude'),
altitudeAcuracy = doc.getElementById('altitudeAcuracy'),
heading = doc.getElementById('heading'),
speed = doc.getElementById('speed'),
support = doc.getElementById('support'),
showDiv = doc.getElementById('show');
function lodeSupport(){
if(navigator.geolocation){
support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';
showDiv.style.display = 'block';
navigator.geolocation.getCurrentPosition(updataPosition,showError);
}else{
support.innerHTML = '对不起，浏览器不支持！';
showDiv.style.display = 'none';
}
}
function updataPosition(position){
var latitudeP = position.coords.latitude,
longitudeP = position.coords.longitude,
accuracyP = position.coords.accuracy,
altitudeP = position.coords.altitude,
altitudeAcuracyP = position.coords.altitudeAcuracy,
headingP = position.coords.heading,
speedP = position.coords.speed;
latitude.innerHTML = latitudeP;
longitude.innerHTML = longitudeP;
accuracy.innerHTML = accuracyP;
altitude.innerHTML = altitudeP;
altitudeAcuracy.innerHTML = altitudeAcuracyP;
heading.innerHTML = headingP;
speed.innerHTML = speedP;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
showDiv.innerHTML="用户拒绝访问地理位置"
break;
case error.POSITION_UNAVAILABLE:
showDiv.innerHTML="地理位置信息无法获取"
break;
case error.TIMEOUT:
showDiv.innerHTML="获取位置时间超时"
break;
case error.UNKNOWN_ERROR:
showDiv.innerHTML="我擦，这是一个未知的错误"
break;
}
}
window.addEventListener('load', lodeSupport , true);
</script>
</body>
</html>
两个经纬度之间距离计算公式

/**
* @desc 根据两点间的经纬度计算距离
* @param float $lat 纬度值
* @param float $lng 经度值
*/
public function getDistance($lat1, $lng1, $lat2, $lng2)
{
$earthRadius = 6367000;
$lat1 = ($lat1 * pi() ) / 180;
$lng1 = ($lng1 * pi() ) / 180; 
$lat2 = ($lat2 * pi() ) / 180;
$lng2 = ($lng2 * pi() ) / 180; 
$calcLongitude = $lng2 - $lng1;
$calcLatitude = $lat2 - $lat1;
$stepOne = pow(sin($calcLatitude / 2), 2) + cos($lat1) * cos($lat2) * pow(sin($calcLongitude / 2), 2);
$stepTwo = 2 * asin(min(1, sqrt($stepOne)));
$calculatedDistance = $earthRadius * $stepTwo; 
return round($calculatedDistance);
}

沈成才

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 获取用户经纬度及距离计算公式

在做项目时需要做定位获取经纬度并计算距离，这里使用 html5 获取经纬度。<!DOCTYPE html><html><head><meta charset="utf-8" /><title>利用html5获取经纬度</title></head><body><span id="support">将下面的经纬度输入谷歌地图：</span><div id="show">纬度：<span
复制链接

扫一扫