台州温岭做网站请找我们 (专业建站 | 诚信服务) 13958630945 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>做网站步骤>>HTML5 获取用户经纬度及距离计算公式
建站流程
 
建站知识
 
网站建站疑难
 
网站设计_图象处理
 
网站设计_Css样式
 
网站建设_Flash疑难
 
手机网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 做网站步骤 > HTML5 获取用户经纬度及距离计算公式

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

1583次浏览
2016-09-05
<!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>

两个经纬度之间距离计算公式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * @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);
 }

页面所在本站地址: http://www.52-life.net/Nshow_reurl.asp?reurl=HTML5_jwed_jl
上一篇 >>解决H5网页在手机浏览器下图标或者背景图片模糊的问题
下一篇 >>HTML5 实现手机拍照上传