11
場所に矢印を表示することについて質問があります。 これは私が持っているものです： 
ジオロケーションに正しくない結果の矢印（アングル）
現在の場所をlocalstorageに保存することができます。後で例えば30メートル先に進むと、2番目のボタン「前の場所に方向を表示する」をクリックすることができます。あなたの前の場所への矢印を得る。これはモバイルウェブサイトなので、ネイティブアプリではありません。私は以前の場所の方向に矢印を設定するために何
<!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こと読み取り - アルファ（ソース： http://dev.w3.org/geo/api/spec-source-orientation.html#introduction） - 最終的な角度は、モバイルデバイスの度合いです。計算された角度 - その角度の矢印を設定しかし、私はいつも奇妙な結果を得る... 私の前の場所がさらに10メートル離れているとき、ほとんどの時間は正しくありません。
なぜこの結果が得られるのですか？ここで
はjsfiddleです：事前にjsfiddle
ありがとう！ Niels
[装置の方位を考慮した位置に表示する矢印（角）]の可能な重複（http://stackoverflow.com/questions/16542774/show-arrow-angle-to-a-location-デバイスの頭を考慮して） –