到地理位置的错误结果箭头（角度）
Posted
技术标签:
【中文标题】到地理位置的错误结果箭头（角度）【英文标题】：Incorrect results arrow (angle) to geolocation 【发布时间】：2013-05-12 08:27:00 【问题描述】：我有一个关于向某个位置显示箭头的问题。 这就是我所拥有的：
您可以将当前位置保存在本地存储中。稍后，例如，当您在 30 米之外时，您可以单击第二个按钮“显示到上一个位置的方向！”获取指向您之前位置的箭头。这是一个移动网站，所以不是原生应用。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY SCRIPT AND COMPASS SCRIPT AND MODERNIZR SCRIPT -->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div class="container">
<h1>Find your location</h1>
<div class="row">
<div class="span12">
<!-- Save your current location -->
<button class="grey" id="btnFindLocation">Save my current location!</button> <br>
<!-- Show direction to previous location -->
<button class="grey" id="btnShowDirection">Show direction to previous location!</button> <br><br>
<!-- Arrow in direction to location -->
<img id="myarrow" class="deviceorientation" src="http://nielsvroman.be/tapcrowd/arrow.png" />
</div>
</div>
<script>
$(window).ready(function()
// orientation object to save heading of the device
var orientation = ;
/* Find location button */
$("#btnFindLocation").click(findLocation);
/* Show direction button */
$("#btnShowDirection").click(showDirection);
// Device orientation
if (window.DeviceOrientationEvent)
window.addEventListener("deviceorientation", handleOrientation, false);
else
alert("Device Orientation is not available");
function handleOrientation(orientData)
var alpha = orientData.alpha;
// To get the compass heading, one would simply subtract alpha from 360 degrees.
var heading = 360 - alpha;
orientation.value = heading;
function findLocation()
// Check if geolocation is supported in browser
if (navigator.geolocation)
// Succes function: geoSucces Error function: geoError
navigator.geolocation.getCurrentPosition(geoSucces,geoError);
else
alert("Geolocation is not supported!");
function geoSucces(position)
// Check if localstorage is supported in browser
if (Modernizr.localstorage)
// Object declaration in localStorage
localStorage.setItem('position', '');
// Save position object in localstorage
localStorage.setItem('position', JSON.stringify(position));
else
alert("localStorage is not available!");
var watchProcess = null;
function showDirection()
if (navigator.geolocation)
if (watchProcess == null)
// Succes function: geoWatchSucces Error function: geoError
navigator.geolocation.watchPosition(geoWatchSucces,geoError);
else
alert("Geolocation is not supported!");
function geoWatchSucces(position)
// Check if localStorage is supported in browser
if (Modernizr.localstorage)
// Get previous location out of localstorage
var location = JSON.parse(localStorage.getItem('position'));
else
alert("localStorage is not available!");
// lat/lon of location in localstorage and current location
var lat1 = location.coords.latitude;
var lon1 = location.coords.longitude;
var lat2 = position.coords.latitude;
var lon2 = position.coords.longitude;
// angle to location
var angle = Math.atan2(lon2 - lon1, lat2 - lat1);
// degrees device
var degrees = orientation.value;
// degrees of device - angle
var result = degrees - angle;
// Set arrow to direction location
setArrowRotation(result);
// Stop monitoring location
function stopShowDirection()
if (navigator.geolocation)
if (watchProcess != null)
navigator.geolocation.clearWatch(watchProcess);
watchProcess = null;
else
alert("Geolocation is not supported!");
// Error function geolocation
function geoError(error)
switch(error.code)
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;
case error.TIMEOUT: alert("retrieving position timed out");
break;
default: alert("unknown error");
break;
// Functions to set direction arrow
function getsupportedprop(proparray)
var root=document.documentElement;
for (var i=0; i<proparray.length; i++)
if (proparray[i] in root.style)
return proparray[i];
return false;
var cssTransform;
function setArrowRotation(x)
if(cssTransform===undefined)
cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
if(cssTransform)
document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
); // END OF DOCUMENT READY
</script>
</body>
</html>
我将箭头设置为上一个位置的方向是： - 调用 watchprocess 函数 - 获取先前位置的纬度/经度+当前位置的纬度/经度 - 计算与先前位置的角度 - 检查移动设备的度数 - 我使用 deviceorientation 事件执行此操作，我读到设备的标题 = 360 - alpha（来源：http://dev.w3.org/geo/api/spec-source-orientation.html#introduction） - 最后的角度是移动设备的度数 - 之前计算的角度 - 用那个角度设置箭头
但我总是得到奇怪的结果...... 当我之前的位置在 10 米之外时，大多数情况下箭头都不正确。
有人知道我为什么会得到这个结果吗？
这是一个 jsfiddle：jsfiddle
提前致谢！ 尼尔斯
【问题讨论】：
Show arrow (angle) to a location considering the heading of the device的可能重复 【参考方案1】：您是否尝试过设置精度？
navigator.geolocation.getCurrentPosition(geoSucces,geoError, enableHighAccuracy: true);
【讨论】：
是的。这是我得到的准确度结果：当我点击“保存我的位置”时，我的准确度为 43.612 ....当我点击“显示到上一个位置的方向”时，我的准确度为 20 ....这是问题？【参考方案2】：检查您的测试设备上的 position.coords.accuracy 是否足够低。您可能会遇到非常不准确的纬度和经度结果。
【讨论】：
当我点击“保存我的位置”时，我的准确度为 43.612...。当我点击“显示到上一个位置的方向”时，我的准确度为 20 .... 这是问题？ 你可以很容易地检查。在地图上画出你的 2 个点，然后用你的准确度半径画一个圆。您计算的角度可能是两个圆中任意两点之间的任意角度。以上是关于到地理位置的错误结果箭头（角度）的主要内容，如果未能解决你的问题，请参考以下文章