JavaScript单页面经纬度距离计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="经纬度距离计算" />
<meta name="author" content="acdiost" />
<title>经纬度距离计算</title>
<style>
body{
background: #353f42;
}
*{
padding: 0;
margin: 0;
}
.main {
margin: 0 auto;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
width: 350px;
height: 350px;
background: #ffffff;
position: absolute;
top: 30%;
left: 50%;
margin-top: -100px;
margin-left: -190px;
}
.title {
width: 100%;
height: 50px;
line-height: 50px;
font-size: x-large;
}
.input-content {
width: 100%;
height: 240px;
}
.input-content input {
width: 330px;
height: 40px;
border: 1px solid #87c7d0;
background: #ffffff;
padding-left: 10px;
padding-right: 10px;
margin-top: 15px;
}
.calculate-btn {
width: 80px;
height: 40px;
color: #fff;
background: #36cee2;
line-height: 40px;
text-align: center;
border: 0px;
}
.calculate-btn:hover {
cursor:pointer;
background: #2ea8b8;
}
</style>
<script type="text/javascript">
// 角度转换为近似相等的弧度角
function radian(d) {
return d * Math.PI / 180.0;
}
/**
* 计算两个坐标点的距离
* longitude1 经度1
* latitude1 纬度1
* longitude2 经度2
* latitude2 纬度2
*/
function calculate() {
var longitude1 = document.getElementById("longitude1").value;
var latitude1 = document.getElementById("latitude1").value;
var longitude2 = document.getElementById("longitude2").value;
var latitude2 = document.getElementById("latitude2").value;
if (longitude1 === "" || latitude1 === "" || longitude2 === "" || latitude2 === "") {
alert("请务必输入一个值。");
return;
}
// 相同经度，不同纬度距离有所误差。在除赤道外的其他纬线上，经度差1度对应的实际距离是111*cos纬度。
var latitude = radian(latitude1) - radian(latitude2);
var longitude = radian(longitude1) - radian(longitude2);
var result = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(latitude / 2), 2) + Math.cos(radian(latitude1)) * Math.cos(radian(latitude2)) * Math.pow(Math.sin(longitude / 2), 2)));
// 地球半径约6378.137。保留单位到厘米
result = Math.round(result * 6378.137 * 1000000) / 1000000;
// 千米转换为米
console.log(result * 1000);
// 计算完成后清空表单内容
if(confirm('两坐标相距约 ' + result * 1000 + ' 米，已记录在控制台，按F12选择 Console 查看历史记录，是否要清除表单内容？')){
document.getElementById("longitude1").value="";
document.getElementById("latitude1").value="";
document.getElementById("longitude2").value="";
document.getElementById("latitude2").value="";
}
}
</script>
</head>
<body>
<div class="main">
<div class="title">
<span>两坐标距离计算器</span>
</div>
<form>
<div class="input-content">
<div>
<input type="text" id="longitude1" placeholder="坐标1的经度" value="" required/>
</div>
<div>
<input type="text" id="latitude1" placeholder="坐标1的纬度" value="" required/>
</div>
<div>
<input type="text" id="longitude2" placeholder="坐标2的经度" value="" required/>
</div>
<div>
<input type="text" id="latitude2" placeholder="坐标2的纬度" value="" required/>
</div>
</div>
<div style="text-align: center;">
<button type="reset" class="calculate-btn" style="float: left;" >重置</button>
<button onclick="calculate();" class="calculate-btn" style="float: right;">计算</button>
</div>
</form>
</div>
</body>
</html>