javascript - 在javascript中计算两个坐标之间的距离?
问题描述
我正在尝试计算 KM 中两个经纬度之间的距离,并在标签或段落中显示该距离。
- 我有一个地址,我需要从中找出
lat1
和lon1
。我能够弄清楚这一点。 - 我需要找到我当前
lat2
的lon2
位置。我也能弄清楚这一点。
现在一旦我有了lat1
,lon1
和lat2
-lon2
我需要找到这些坐标之间的距离。NaN
下面是我的代码,但一旦我提醒它,它就会给出距离。我不确定这里有什么问题。这也是我在这里做的正确方式吗?
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
#map_div{
width:400px;
height:400px;
margin: 0 auto;
}
#outer {
width:400px;
height:50px;
margin:0 auto;
text-align:center;
}
#outer input[type="text"] {
display: block;
margin: 0 auto;
}
</style>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="outer">
<p id="distance_text">this is 201 km away from</p>
<input type="text" name="location" value="Current Location"><br>
<div id="map_div"></div>
</div>
</body>
<script type="text/javascript">
var lat1;
var lon1;
var lat2;
var lon2;
var geocoder = new google.maps.Geocoder();
var address = "1750 riverside drive, ottawa, ontario, canada";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat1 = results[0].geometry.location.lat();
lon1 = results[0].geometry.location.lng();
}
});
var x = document.getElementById("distance_text");
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
lat2 = position.coords.latitude;
lon2 = position.coords.longitude;
}
var distance = getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2);
alert(distance);
function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1);
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
}
function deg2rad(deg) {
return deg * (Math.PI/180)
}
</script>
</html>
计算后我需要201 km
用实际距离替换。这是我的jsfiddle
解决方案
您可以使用谷歌地图距离方法,但它需要LatLng
对象
尝试这个:
const from = new google.maps.LatLng(lat1, lng1);
const to = new google.maps.LatLng(lat2, lng2);
const distance = google.maps.geometry.spherical.computeDistanceBetween(from,to)
这是工作的 JSfiddle 您可能必须在地图脚本标签中添加 API 密钥: https ://jsfiddle.net/ruokyanv/
更改 p 标签距离:是的,您可以在 html 中注入 js 文件并使用 jquery $:
var distance = `this is ${distance} km away from`
$('#distance_text').val(distance)
让我知道问题是否仍然存在。
推荐阅读
- elasticsearch - 如何在 Kibana 数据可视化中使用 Bucket Selector?
- amazon-web-services - 当放置在 S3 存储桶中时,让 AWS Rekognition 读取图像的问题
- php - mysqli多查询分离
- react-native - Firebase 更新错误:存储在 Firestore 中的日期对象的行为将发生变化,您的应用可能会中断
- sql - sql - 检查列是否以特定的正则表达式开头
- android - 从 onPostExecute 获取 JSON 字符串到 OnCreateView
- php - Uncaught ReferenceError: $ is not defined - Laravel 5.5 + Laravel Mix
- react-native - 如何升级 react-native gradle 版本
- javascript - 无法动态创建 div 内容
- proxy - Node.js 中的 Google GAX / gRPC 不适用于 HTTP/S 代理