Tôi có câu hỏi về việc hiển thị mũi tên đến một vị trí. Đây là những gì tôi có: 
Kết quả không đúng arrow (góc) để định vị địa lý
Bạn có thể lưu vị trí hiện tại của mình vào bộ nhớ cục bộ. Một thời gian sau đó khi bạn đang cho ví dụ 30 mét hơn nữa bạn có thể nhấp vào nút thứ hai "Hiển thị hướng đến vị trí trước đó!" để có được một mũi tên đến vị trí trước đó của bạn. Đây là trang web trên điện thoại di động, vì vậy không phải là ứng dụng gốc.
Đây là mã của tôi:
<!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>
Những gì tôi làm để thiết lập các mũi tên theo hướng của địa điểm trước đây là: - Gọi watchprocess chức năng - Nhận lat/lon của vị trí trước + lat/lon của vị trí hiện tại - Tính góc tới vị trí trước - Kiểm tra mức độ của thiết bị di động - Tôi làm điều này với sự kiện định vị, tôi đọc tiêu đề của thiết bị = 360 - alpha (nguồn: http://dev.w3.org/geo/api/spec-source-orientation.html#introduction) - góc cuối cùng là mức độ của thiết bị di động - previou s tính toán góc - thiết mũi tên với góc
Nhưng tôi luôn có được kết quả kỳ lạ ... Khi vị trí trước đây của tôi là 10 mét hơn nữa vào mũi tên là không đúng đối với hầu hết các lần.
Có ai biết tại sao tôi nhận được kết quả này không?
Đây là một jsfiddle: jsfiddle
Cảm ơn bạn trước! Niels
thể trùng lặp của [Hiện mũi tên (góc) đến một địa điểm xem xét các tiêu đề của các thiết bị] (http://stackoverflow.com/questions/16542774/show-arrow-angle-to-a-location- xem xét-the-tiêu đề-of-the-thiết bị) –