在 JavaScript 中从 gps 位置指向另一个不指向正确方向的箭头
Posted
技术标签:
【中文标题】在 JavaScript 中从 gps 位置指向另一个不指向正确方向的箭头【英文标题】：Arrow pointing from a gps position to another not pointing in right direction in JavaScript 【发布时间】：2013-01-17 01:06:54 【问题描述】：我在互联网和 *** 上进行了很多搜索，但不知何故我似乎无法做到正确！我正在尝试让箭头从 1 GPS 方向指向另一个方向。
我附上了一个测试 html，它准确地解释了我的问题。 我无法让箭头指向正确的方向，我也不知道我做错了什么。它计算角度，箭头以该角度旋转，但它不是正确的角度，我没有得到我期望的结果。
任何帮助将不胜感激。
<!DOCTYPE HTML>
<html>
<head>
<title>Point to a direction test</title>
<script>
function getLocation()
var info = document.getElementById("info");
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(calculateArrowRotation);
else
info.innerHTML = "Geolocation is not supported by this browser.";
function calculateArrowRotation(location)
// Point from here (Arc de Triomph, Paris)
// var phoneLatitude = 48.873934;
// var phoneLongitude = 2.2949;
// Point from here (Gare du Nord, Paris)
var phoneLatitude = 48.87977;
var phoneLongitude = 2.355752;
// Point to here (Musée du Louvre, Place du Carrousel, Paris, France)
var destinationLatitude = 48.861519;
var destinationLongitude = 2.3345495;
var arrowAngle = bearing(phoneLatitude, phoneLongitude, destinationLatitude, destinationLongitude);
var element = document.getElementById('arrow');
element.style['transform'] = 'rotate(' + arrowAngle + 'deg)';
var info = document.getElementById("info");
info.innerHTML = "Longitude = " + phoneLongitude + "<br/>Latitude = " + phoneLatitude + "<br/>Arrow angle = " + arrowAngle;
function bearing(lat1,lng1,lat2,lng2)
var dLon = (lng2-lng1);
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
var rad = Math.atan2(y, x);
var brng = toDeg(rad);
return 360 - ((brng + 360) % 360);
function toRad(deg)
return deg * Math.PI / 180;
function toDeg(rad)
return rad * 180 / Math.PI;
</script>
</head>
<body onload="getLocation()">
<img id="map" src="map.png" style="position: absolute; top: 20; left: 20px;">
<img id="arrow" src="arrow.png" style="position: absolute; top: 80px; left: 105px;">
<div id="info" style="position: absolute; top: 340px; left: 20px; font-family:sans-serif; font-size:11px;"></div>
</body>
【问题讨论】：
【参考方案1】：bearing 中的最后一行用于将轴承的方向从顺时针更改为逆时针。
你应该只使用
return (brng + 360) % 360;
此外，您确实意识到您在 calculateArrowRotation() 中使用了硬编码值，并且从未使用过输入参数 location，对吧？
最后，您的轴承实现不正确。但这不是你的错，列出实现的网站可能在一个重要细节上模糊不清：你输入三角函数的所有内容都必须首先转换为弧度：
function bearing(lat1,lng1,lat2,lng2)
var dLon = toRad(lng2-lng1);
lat1 = toRad(lat1);
lat2 = toRad(lat2);
var y = Math.sin(dLon) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
var rad = Math.atan2(y, x);
var brng = toDeg(rad);
return (brng + 360) % 360;
【讨论】：
太棒了！完美运行。谢谢，+1 的详细答案。以上是关于在 JavaScript 中从 gps 位置指向另一个不指向正确方向的箭头的主要内容，如果未能解决你的问题，请参考以下文章
在没有互联网的情况下使用 Javascript 获取 GPS 位置 [重复]