个人中心
gpt4 book ai didi

javascript - 错误的结果箭头( Angular )到地理定位

转载 作者：可可西里 更新时间：2023-11-01 02:26:54 25 4
gpt4 key购买 nike

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

您可以将当前位置保存在本地存储中。稍后，当您距离例如 30 米远时，您可以单击第二个按钮“显示到先前位置的方向!”获取指向您之前位置的箭头。这是一个移动网站，因此不是 native 应用。

这是我的代码:

<!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函数- 获取之前位置的纬度/经度+当前位置的纬度/经度- 计算与先前位置的 Angular - 检查移动设备的度数 - 我用 deviceorientation 事件执行此操作，我读到设备的标题 = 360 - alpha(来源:http://dev.w3.org/geo/api/spec-source-orientation.html#introduction)- 最终 Angular 是移动设备的度数 - 之前计算的 Angular - 以该 Angular 设置箭头

但我总是得到奇怪的结果......当我之前的位置再远 10 米时，箭头在大多数情况下都不正确。

有谁知道我为什么会得到这个结果？

这是一个 jsfiddle:jsfiddle

提前致谢!尼尔斯

最佳答案

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

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

关于javascript - 错误的结果箭头( Angular )到地理定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16604473/

25 4 0
文章推荐： ios - 从 NSUserDefaults 获取值时出错
文章推荐： java - 如何在 JGraphX 中将组件背景设置为特定颜色？
文章推荐： java - 如何防止通过浏览器直接调用servlet
文章推荐： ios - CKFetchRecordChangesOperation 返回的 clientChangeToken 是什么？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com