11
위치에 화살표 표시에 대한 질문이 있습니다. 이것은 내가 가지고있는 것입니다. 
잘못된 결과 geolocation에 대한 화살표 (각도)
현재 위치를 localstorage에 저장할 수 있습니다. 잠시 후 예를 들어 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 전화 기능 - 이전 위치 + 위도/경도의 취득 위도/경도 다음
내 코드입니다 현재 위치의 각도를 계산합니다. - 이전 위치와의 각도를 계산합니다. - 휴대 기기의 각도를 확인하십시오. - 기기 방향 이벤트로 수행합니다. 기기의 제목 = 360-alpha (출처 : http://dev.w3.org/geo/api/spec-source-orientation.html#introduction) - The 최종 각도는 모바일 장치의 각도입니다. s 계산 각 - 해당 각도로 화살표 설정그러나 나는 항상 이상한 결과를 얻습니다 ... 이전 위치가 10 미터 더 멀리 있으면 대부분의 시간에 화살표가 올바르지 않습니다.
이 결과를 얻는 이유를 아는 사람이 있습니까? 사전에 jsfiddle
감사 : 여기
는 jsfiddle입니다! Niels
http://stackoverflow.com/questions/16542774/show-arrow-angle-to-a-location- 기기의 머리를 고려한 것) –