我有一个关于向某个位置显示箭头的问题。这就是我所拥有的：
您可以将当前位置保存在本地存储中。稍后，例如，当您在 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
提前致谢！尼尔斯