指南针和GPS坐标Phonegap

我正在从Phonegap采取指南针脚本的项目，我想将它连接到我的正确的GPS位置，并指向一个固定的GPS位置（如餐馆等）Basicly箭头必须指向餐厅的方向，所以我知道走哪条路。指南针和GPS坐标Phonegap

这是两个我想结合： 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

来源

2012-09-18 Ewald Bos

以下代码基本上是做你想做的。它会计算从当前位置（通过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>

来源

2012-12-08 18:24:44 DaveAlden

你能提供一个投寄箱文件夹的新链接文件，我真的可以在一个项目中，我提前 – 2013-10-16 19:29:09

上THX工作使用我已上载该项目ge.tt和更新链接指向此:-) – DaveAlden

指南针和GPS坐标Phonegap

回答

相关问题