2012-07-21 104 views

回答

0

不知道在后台运行它...但我跑过同一个教程,不得不关闭睡眠模式,以使其工作。我在运行该教程时仍遇到问题。第一首曲目完美运行,但是后续曲目无法运行。系统冻结。我发现了删除startTracking_stop函数中的var的建议。仍然没有好处。然后我添加了一个警报,发现对象没有被传递...我得到null的消息。

你是如何让这个节目超越第一轨?

+0

有在本教程中的变种范围的一些小错误。我今晚会给你我的代码。它仍在运行。 – liquid 2012-07-23 06:08:42

+0

哦,废话。 iForgot抱歉... – liquid 2012-07-24 05:27:22

0
<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
     <meta charset="utf-8"> 


    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.min.css" /> 
    <link rel="stylesheet" href="css/author.css" /> 
    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> 

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<your CODEhere>&sensor=false"></script> 

    <script type="text/javascript" src="js/libs/json2.js"></script> 
    <script type="text/javascript" src="js/libs/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="js/libs/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="js/plugins/countdown.js"></script> 

    <script type="text/javascript" src="js/exercisetracker.js"></script> 
    </head> 
    <body onload="onBodyLoad()"> 

    <!-- BEGIN home --> 
    <div data-role="page" id="home"> 
     <div data-role="header"> 
     <h1>Home</h1> 
     <div data-role="navbar"> 
      <ul> 
      <li><a href="#home" data-transition="none" data-icon="home">Home</a></li> 
      <li><a href="#startTracking" data-transition="none" data-icon="plus">Track Workout</a></li> 
      <li><a href="#history" data-transition="none" data-icon="star">History</a></li> 
      </ul> 
     </div> 
     </div> 

     <div data-role="content"> 
     <div data-role="controlgroup"> 
      <button id="home_network_button" data-icon="check">Internet Access Enabled</button> 
      <button id="home_clearstorage_button">Clear local storage</button> 
      <button id="home_seedgps_button">Load Seed GPS Data</button> 
     </div> 
     </div> 
    </div> 
    <!-- EOF home --> 

    <!-- BEGIN startTracking --> 
    <div data-role="page" id="startTracking"> 
     <div data-role="header"> 
     <h1>Track Workout</h1> 

     <div data-role="navbar"> 
      <ul> 
      <li><a href="#home" data-transition="none" data-icon="home">Home</a></li> 
      <li><a href="#startTracking" data-transition="none" data-icon="plus">Track Workout</a></li> 
      <li><a href="#history" data-transition="none" data-icon="star">History</a></li> 
      </ul> 
     </div> 
     </div> 

     <div data-role="content"> 
     <p id="startTracking_status"></p> 
     <div data-role="fieldcontain" class="ui-hide-label"> 
      <label for="track_id">Track ID/Name:</label> 
      <input type="text" name="track_id" id="track_id" placeholder="Workout ID/Name"/> 
     </div> 

     <button data-role="button" id="startTracking_start">Start Tracking</button> 
     <button data-role="button" id="startTracking_stop">Stop Tracking</button> 

     <p id="startTracking_debug"></p> 

     </div> 
    </div> 
    <!-- EOF startTracking --> 

    <!-- BEGIN history --> 
    <div data-role="page" id="history"> 
    <div data-role="header"> 
     <h1>History</h1> 

     <div data-role="navbar"> 
     <ul> 
      <li><a href="#home" data-transition="none" data-icon="home">Home</a></li> 
      <li><a href="#startTracking" data-transition="none" data-icon="plus">Track Workout</a></li> 
      <li><a href="#history" data-transition="none" data-icon="star">History</a></li> 
     </ul> 
     </div> 
    </div> 

    <div data-role="content"> 
     <p id="tracks_recorded"></p> 
     <ul data-role="listview" id="history_tracklist"> 

     </ul> 
    </div> 
    </div> 
    <!-- EOF history --> 

    <!-- BEGIN track_info --> 
    <div data-role="page" id="track_info"> 

    <div data-role="header"> 
     <h1>Viewing Single Workout</h1> 

     <div data-role="navbar"> 
     <ul> 
      <li><a href="#home" data-transition="none" data-icon="home">Home</a></li> 
      <li><a href="#startTracking" data-transition="none" data-icon="plus">Track Workout</a></li> 
      <li><a href="#history" data-transition="none" data-icon="star">History</a></li> 
     </ul> 
     </div> 
    </div> 

    <div data-role="content"> 
     <p id="track_info_info"></p> 

     <div id="map_canvas" style="position:absolute;bottom:0;left:0;width:100%;height:300px;"></div> 

    </div> 
    </div> 
    <!-- EOF track_info --> 
    </body> 
</html> 

而现在的JS-文件

function gps_distance(lat1, lon1, lat2, lon2) 
{ 
    // http://www.movable-type.co.uk/scripts/latlong.html 
    var R = 6371; // km 
    var dLat = (lat2-lat1) * (Math.PI/180); 
    var dLon = (lon2-lon1) * (Math.PI/180); 
    var lat01 = lat1 * (Math.PI/180); 
    var lat02 = lat2 * (Math.PI/180); 

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
     Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat01) * Math.cos(lat02); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c; 

    return d; 
} 

function onBodyLoad() { 
    document.addEventListener("deviceready", onDeviceReady, false); 

    var track_id = ''; // Name/ID of the exercise 
    var watch_id; // ID of the geolocation 
    var tracking_data = []; // Array containing GPS position objects 

    $("#startTracking_start").live('click', function(){ 

    // Start tracking the User 
    watch_id = navigator.geolocation.watchPosition(

     // Success 
     function(position){ 
      tracking_data.push(position); 
      console.log(tracking_data); 
     }, 

     // Error 
     function(error){ 
      console.log(error); 
     }, 

     // Settings 
     { frequency: 3000, enableHighAccuracy: true }); 

    // Tidy up the UI 
    track_id = $("#track_id").val(); 

    $("#track_id").hide(); 
    $("#startTracking_status").html("Tracking workout: <strong>" + track_id + "</strong>"); 

    return; 
    }); 

    $("#startTracking_stop").live('click', function(){ 

    // Stop tracking the user 
    navigator.geolocation.clearWatch(watch_id); 

    // Save the tracking data 
    window.localStorage.setItem(track_id, JSON.stringify(tracking_data)); 

    // Reset watch_id and tracking_data 
    watch_id = null; 
    tracking_data = null; 

    // Tidy up the UI 
    $("#track_id").val("").show(); 
    $("#startTracking_status").html("Stopped tracking workout: <strong>" + track_id + "</strong>"); 
    }); 

    $("#home_clearstorage_button").live('click', function(){ 
    window.localStorage.clear(); 
    console.log('LocalStorage cleared'); 
    }); 

    $("#home_seedgps_button").live('click', function(){ 
    window.localStorage.setItem('Sample block', '[{"timestamp":1335700802000,"coords":{"heading":null,"altitude":null,"longitude":170.33488333333335,"accuracy":0,"latitude":-45.87475166666666,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700803000,"coords":{"heading":null,"altitude":null,"longitude":170.33481666666665,"accuracy":0,"latitude":-45.87465,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700804000,"coords":{"heading":null,"altitude":null,"longitude":170.33426999999998,"accuracy":0,"latitude":-45.873708333333326,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700805000,"coords":{"heading":null,"altitude":null,"longitude":170.33318333333335,"accuracy":0,"latitude":-45.87178333333333,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700806000,"coords":{"heading":null,"altitude":null,"longitude":170.33416166666666,"accuracy":0,"latitude":-45.871478333333336,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700807000,"coords":{"heading":null,"altitude":null,"longitude":170.33526833333332,"accuracy":0,"latitude":-45.873394999999995,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700808000,"coords":{"heading":null,"altitude":null,"longitude":170.33427333333336,"accuracy":0,"latitude":-45.873711666666665,"speed":null,"altitudeAccuracy":null}},{"timestamp":1335700809000,"coords":{"heading":null,"altitude":null,"longitude":170.33488333333335,"accuracy":0,"latitude":-45.87475166666666,"speed":null,"altitudeAccuracy":null}}]'); 

    }); 

    // When the user views the history page 
    $('#history').live('pageshow', function() { 

    // Count the number of entries in localStorage and display this information to the user 
    tracks_recorded = window.localStorage.length; 
    $("#tracks_recorded").html("<strong>" + tracks_recorded + "</strong> workout(s) recorded"); 

    // Empty the list of recorded tracks 
    $("#history_tracklist").empty(); 

    // Iterate over all of the recorded tracks, populating the list 
    for(i=0; i<tracks_recorded; i++){ 
     $("#history_tracklist").append("<li><a href='#track_info' data-ajax='false'>" + window.localStorage.key(i) + "</a></li>"); 
    } 

    // Tell jQueryMobile to refresh the list 
    $("#history_tracklist").listview('refresh'); 

    }); 

    $("#history_tracklist li a").live('click', function(){ 

    $("#track_info").attr("track_id", $(this).text()); 

    }); 

// When the user views the Track Info page 
    $('#track_info').live('pageshow', function(){ 

    // Find the track_id of the workout they are viewing 
    var key = $(this).attr("track_id"); 

    // Update the Track Info page header to the track_id 
    $("#track_info div[data-role=header] h1").text(key); 

    // Get all the GPS data for the specific workout 
    var data = window.localStorage.getItem(key); 

    console.log('Saved Storage: ' + data); 

    // Turn the stringified GPS data back into a JS object 
    data = JSON.parse(data); 

    // Calculate the total time taken for the track 
    start_time = new Date(data[0].timestamp).getTime(); 
    end_time = new Date(data[data.length-1].timestamp).getTime(); 

    total_time_ms = end_time - start_time; 
    total_time_s = total_time_ms/1000; 

    final_time_m = Math.floor(total_time_s/1000); 
    final_time_s = total_time_s - (final_time_m * 60); 

    // Calculate the total distance travelled 
    total_km = 0; 

    for(i = 0; i < data.length; i++){ 

     if(i == (data.length - 1)){ 
     break; 
     } 

     total_km += gps_distance(data[i].coords.latitude, data[i].coords.longitude, data[i+1].coords.latitude, data[i+1].coords.longitude); 
    } 

    total_km_rounded = total_km.toFixed(2); 

    // Display total distance and time 
    $("#track_info_info").html('Travelled <strong>' + total_km_rounded + '</strong> km in <strong>' + final_time_m + 'm</strong> and <strong>' + final_time_s + 's</strong>'); 

    console.log('Write Info') 

    // Set the initial Lat and Long of the Google Map 
    var myLatLng = new google.maps.LatLng(data[0].coords.latitude, data[0].coords.longitude); 

    // Google Map options 
    var myOptions = { 
     zoom: 15, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Create the Google Map, set options 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var trackCoords = []; 

    // Add each GPS entry to an array 
    for(i=0; i<data.length; i++){ 
     trackCoords.push(new google.maps.LatLng(data[i].coords.latitude, data[i].coords.longitude)); 
    } 

    // Plot the GPS entries as a line on the Google Map 
    var trackPath = new google.maps.Polyline({ 
     path: trackCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    // Apply the line to the map 
    trackPath.setMap(map); 

    }); 
} 






function onDeviceReady() { 

    if (navigator.network.connection.type == Connection.NONE) { 
    $('#home_network_button').text('No Internet Access') 
     .attr('data-icon', 'delete') 
     .button('refresh'); 
    } 
}