Question

我有一个关于向某个位置显示箭头的问题。这就是我所拥有的： enter image description here

您可以将当前位置保存在本地存储中。不久之后，当您再进一步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

提前致谢！尼尔斯

Answer 1

您是否尝试过设置准确度？

navigator.geolocation.getCurrentPosition(geoSucces,geoError, {enableHighAccuracy: true});

Answer 2

检查您的测试设备上的position.coords.accuracy是否足够低。您可能只会遇到非常不准确的纬度和经度结果。

地理定位的结果箭头（角度）不正确

2 个答案: