最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Phonegap with Compass and GPS coordinates - Stack Overflow

programmeradmin6浏览0评论

I am working on a project that takes the pass script from Phonegap and i would like to connect it to my currect GPS position and than point to a fixed GPS position (like a restaurant etc.) Basicly the arrow must be pointing in the direction of the restaurant so i know which way to go/walk.

These are the two i would like to bine: .0.0/cordova_geolocation_geolocation.md.html#Geolocation .0.0/cordova_pass_pass.md.html#Compass

I have this projec as the base:

Who can help me in the right direction :-) ?

Thnx Ewald

I am working on a project that takes the pass script from Phonegap and i would like to connect it to my currect GPS position and than point to a fixed GPS position (like a restaurant etc.) Basicly the arrow must be pointing in the direction of the restaurant so i know which way to go/walk.

These are the two i would like to bine: http://docs.phonegap./en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation http://docs.phonegap./en/2.0.0/cordova_pass_pass.md.html#Compass

I have this projec as the base: https://github./Rockncoder/PGCompass

Who can help me in the right direction :-) ?

Thnx Ewald

Share Improve this question edited Sep 18, 2012 at 12:13 Ewald Bos asked Sep 18, 2012 at 11:54 Ewald BosEwald Bos 1,7701 gold badge21 silver badges36 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

The following code basically does what you want. It calculates the distance and bearing from your current location (by GPS) to a destination position and uses the pass to determine your current heading. The difference between your current heading and the bearing to the destination is the angle for your arrow.

The code with assets and piled Android APK can be downloaded from here: http://ge.tt/4Kb2oQv/v/0

Here's the code, hope it helps!

<!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./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 passTimerId;
        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(passTimerId) navigator.pass.clearWatch(passTimerId);
            passTimerId = navigator.pass.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 pass error";
            }

            $error.html("Error while retrieving pass 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>
发布评论

评论列表(0)

  1. 暂无评论