javascript - Stuck at parse coordinates with button -
i'm working code of first answer from: phonegap compass , gps coordinates
i try make don't need put time lat , lon.
for i'm making button current position, , send program work. here don't know how continue, tryed dozen of times , i'm stuck because don't know lot of javascript/jquery.
any can me how need make button , send coordinates program?
here version of program:
<!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 accept reliable position minupdatedistance = 1; // minimum number of metres move before updating distance destination $targetlat = $('#target-lat'); $targetlon = $('#target-lon'); $error = $('#error'); $results = $('#results'); $distance = $('#distance'); $bearing = $('#bearing'); $heading = $('#heading'); $difference = $('#difference'); $arrow = $('#arrow'); document.getelementbyid('#target-lat').value('48'); document.getelementbyid('#target-lon').value('-1'); 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)"); } function locate(){ if (navigator.geolocation) { var location_timeout = settimeout("geolocfail()", 10000); navigator.geolocation.getcurrentposition(function(position) { cleartimeout(location_timeout); locationsuccess(position); }, function(error) { cleartimeout(location_timeout); geolocfail(); }); }else{ showerror("your browser doesn't support geolocation!"); } } function locationsuccess(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; $('input[id=target-lat]').val(lat); $('input[id=target-lon]').val(lon); $targetlat.html(lat); $targetlon.html(lon); $targetlat.change(updatedestination); $targetlon.change(updatedestination); updatedestination(); } </script> </head> <body> <div id="results"> <div id="arrow"></div> <div class="text"> <p>distance destination: <span id="distance"></span> metres</p> <p>bearing destination: <span id="bearing"></span> degrees</p> <p>current heading: <span id="heading"></span> degrees</p> <p>difference in heading , bearing: <span id="difference"></span> degrees</p> </div> </div> <p id="error"></p> <h2>destination</h2> <div> <p>current latitude: <span id="target-lat"></span> </p> </div> <div> <p>current longitude: <span id="target-lon"></span> </p> </div> <br> <button onclick="locate()">try it</button> </body> </html> but don't work, time in results says distance nan , arrow don't move.
else how can make saves position if close app?
sorry , help!
i guess added
http://api.phonegap.com/1.0/geolocation to config.xml?
Comments
Post a Comment