javascript – 带指南针和GPS坐标的Phonegap

我正在开发一个项目,从Phonegap获取指南针脚本,我想将它连接到我当前的GPS位置,而不是指向固定的GPS位置(如餐厅等).基本上箭头必须指向方向餐厅所以我知道哪条路去/步行.

以下是我想要结合的两个：
http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation
http://docs.phonegap.com/en/2.0.0/cordova_compass_compass.md.html#Compass

我把这个项目作为基础：https://github.com/Rockncoder/PGCompass

谁能帮我正确的方向:-)？

Thnx Ewald

解决方法:

以下代码基本上可以满足您的需求.它计算从当前位置(通过GPS)到目的地位置的距离和方位,并使用指南针确定当前航向.您当前航向与目的地方位之间的差异是箭头的角度.

具有资产和编译Android APK的代码可以从这里下载：
http://ge.tt/4Kb2oQv/v/0

这是代码,希望它有所帮助！

<!DOCTYPE HTML>
<html>
<head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Compass test</title>

    <script type="text/javascript" src="phonegap.js"></script> 
    <script type="text/javascript" src ="jquery-1.7.1.min.js">//</script> <!--http://code.jquery.com/jquery-1.7.1.min.js -->
    <script type="text/javascript" src ="latlon.js">//</script> <!-- based on http://www.movable-type.co.uk/scripts/latlong.html -->


    <style type="text/css">
        #error, #results{
            display: none;
        }

        #arrow{
            position: absolute;
            width: 30px;
            height: 30px;
            background: 50% 50% no-repeat; 
            background-size: 30px 30px;
            background-image: url('arrow.png');
            top: 0;
            left: 50%;
            margin: 30px 0 0 -15px;
        }

        #results .text{
            margin-top: 100px;
        }
    </style>

    <script type="text/javascript" >
        var destinationPosition;
        var destinationbearing;

        var positionTimerId;
        var currentPosition;
        var prevPosition;
        var prevPositionError;      

        var compasstimerId;
        var currentheading;
        var prevheading;
        var prevCompassErrorCode;

        $(document).on("deviceready", function() {
            minPositionAccuracy = 50; // Minimum accuracy in metres to accept as a reliable position
            minUpdatedistance = 1; // Minimum number of metres to move before updating distance to destination

            $targetLat = $('#target-lat');
            $targetLon = $('#target-lon');
            $error = $('#error');           
            $results = $('#results');
            $distance = $('#distance');
            $bearing = $('#bearing');
            $heading = $('#heading');
            $difference = $('#difference');
            $arrow = $('#arrow');


            watchPosition();            
            watchCompass();

            // Set destination
            $targetLat.change(updateDestination);
            $targetLon.change(updateDestination);
            updateDestination();

        });

        function watchPosition(){
            if(positionTimerId) navigator.geolocation.clearWatch(positionTimerId); 
            positionTimerId = navigator.geolocation.watchPosition(onPositionUpdate, onPositionError, {
                enableHighAccuracy: true,
                timeout: 1000,
                maxiumumAge: 0
            });
        }

        function watchCompass(){
            if(compasstimerId) navigator.compass.clearWatch(compasstimerId);
            compasstimerId = navigator.compass.watchheading(onCompassUpdate, onCompassError, {
                frequency: 100 // Update interval in ms
            });
        }

        function onPositionUpdate(position){
            if(position.coords.accuracy > minPositionAccuracy) return;

            prevPosition = currentPosition;
            currentPosition = new LatLon(position.coords.latitude, position.coords.longitude);

            if(prevPosition && prevPosition.distanceto(currentPosition)*1000 < minUpdatedistance) return;

            updatePositions();
        }

        function onPositionError(error){
            watchPosition();

            if(prevPositionError && prevPositionError.code == error.code && prevPositionError.message == error.message) return; 

            $error.html("Error while retrieving current position. <br/>Error code: " + error.code + "<br/>Message: " + error.message);

            if(!$error.is(":visible")){
                $error.show();
                $results.hide();
            }

            prevPositionError = {
                code: error.code,
                message: error.message
            };
        }

        function onCompassUpdate(heading){
            prevheading = currentheading;
            currentheading = heading.trueheading >= 0 ? Math.round(heading.trueheading) : Math.round(heading.magneticheading);

            if(currentheading == prevheading) return;

            updateheading();
        }

        function onCompassError(error){
            watchCompass();

            if(prevCompassErrorCode && prevCompassErrorCode == error.code) return; 

            var errorType;
            switch(error.code){
                case 1:
                    errorType = "Compass not supported";
                    break;
                case 2:
                    errorType = "Compass internal error";
                    break;
                default:
                    errorType = "UnkNown compass error";
            }

            $error.html("Error while retrieving compass heading: "+errorType);

            if(!$error.is(":visible")){
                $error.show();
                $results.hide();
            }

            prevCompassErrorCode = error.code;
        }

        function updateDestination(){
            destinationPosition = new LatLon($targetLat.val(), $targetLon.val());
            updatePositions();
        }       


        function updatePositions(){
            if(!currentPosition) return;

            if(!$results.is(":visible")){
                $results.show();
                $error.hide();
            }

            destinationbearing = Math.round(currentPosition.bearingTo(destinationPosition)); 

            $distance.html(Math.round(currentPosition.distanceto(destinationPosition)*1000));           
            $bearing.html(destinationbearing);

            updateDifference(); 
        }

        function updateheading(){
            $heading.html(currentheading);
            updateDifference();
        }

        function updateDifference(){
            var diff = destinationbearing - currentheading;
            $difference.html(diff);         
            $arrow.css("-webkit-transform", "rotate("+diff+"deg)");         
        }
    </script>
</head>
<body>
    <div id="results">
        <div id="arrow"></div>
        <div class="text">
            <p>distance to destination: <span id="distance"></span> metres</p>
            <p>bearing to destination: <span id="bearing"></span> degrees</p>
            <p>Current heading: <span id="heading"></span> degrees</p>      
            <p>Difference in heading and bearing: <span id="difference"></span> degrees</p>
        </div>
    </div>

    <p id="error"></p>

    <h2>Destination</h2>
    <div>
        <label for="target-lat">Latitude: </label>
        <input id="target-lat" value="50.623966949462" />
    </div>
    <div>
        <label for="target-lon">Longitude: </label>
        <input id="target-lon" value="-4.7256830197787" />
    </div>

</body>
</html>

javascript – 带指南针和GPS坐标的Phonegap

相关推荐