如何使用 JavaScript 在 Web SQL 中存储当前地理位置 - Cordova答案

【问题标题】：How to store current Geo-location in Web SQL using JavaScript - Cordova如何使用 JavaScript 在 Web SQL 中存储当前地理位置 - Cordova
【发布时间】：2017-12-20 22:10:59
【问题描述】：

我正在尝试使用 sq-lite websql 将 Geolocation 存储在 google chrome 浏览器存储中...

var db;

window.onload = function() {
  document.getElementById('btnSave').addEventListener('click', saveData);
  db = window.openDatabase("geolocation", "1.0", "Technorigins", 200000);
}

function saveData(e) {
  db.transaction(saveRecord, onSuccessdb, onErrordb);
}

function saveRecord(transaction) {
  var latitude = document.getElementById('latitude').value;
  var longitude = document.getElementById('longitude').value;
  transaction.executeSql('CREATE TABLE IF NOT EXISTS geol_cordova (id INTEGER PRIMARY KEY AUTOINCREMENT, latitude TEXT NOT NULL, longitude TEXT NOT NULL) ');
  var sql = "INSERT INTO geol_cordova (latitude,longitude) VALUES ('" + latitude + "', '" + longitude + "')";

  transaction.executeSql(sql);
  transaction.executeSql("SELECT * FROM geol_cordova", [], onSuccessdb, onErrordb);
  alert(sql);
}

function getSuccess(transaction, result) {
  var rows = result.rows;
  for (var x = 0; x < rows.length; x++) {
    var latitude = result.rows[x].Latitude;
    var longitude = result.rows[x].Longitude;
    var out = "<li>" + latitude + "<br/>" + longitude + "</li>";
    document.getElementById('geolo').innerHTML += out;
  }

  $('#geolo').listview('refresh');
}

function getError(e) {
  alert(e);
}

function onSuccessdb() {
  alert("Location Saved");
}

function onErrordb(error) {
  alert("SQL error: ");
}

document.addEventListener("deviceready", onDeviceReady, false);

var watchID = null;

function onDeviceReady() {

  var options = {
    timeout: 30000,
    maximumAge: 60000
  };
  watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}

function onSuccess(position) {
  var element = document.getElementById('geolocation');
  element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
    'Longitude: ' + position.coords.longitude + '<br />' +
    'GPS Position: ' + distance('23.054996', '72.595171', position.coords.latitude, position.coords.longitude, 'ME') + ' Metres' +
    '<hr />' + element.innerHTML;
  document.getElementById('latitude').value = position.coords.latitude;
  document.getElementById('longitude').value = position.coords.longitude;
}

function onError(error) {
  alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}

function distance(lat1, lon1, lat2, lon2, unit) {
  var radlat1 = Math.PI * lat1 / 180
  var radlat2 = Math.PI * lat2 / 180
  var theta = lon1 - lon2
  var radtheta = Math.PI * theta / 180
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist)
  dist = dist * 180 / Math.PI
  dist = dist * 60 * 1.1515
  if (unit == "K") {
    dist = dist * 1.609344
  }
  if (unit == "N") {
    dist = dist * 0.8684
  }
  if (unit == "ME") {
    dist = dist * 1.609344 * 1000
  }
  return dist
}

<!DOCTYPE html>
<html>

<head>
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>geolocation watchPosition</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Database Storage</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p id="geolocation">Watching geolocation...</p>
      <input type="hidden" id="latitude" value="" />
      <input type="hidden" id="longitude" value="" />
      <button id="btnSave" type="submit">Save</button>
      <ul id="geolo" data-role="listview">
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <link rel="stylesheet" type="text/css" href="css/overrides.css" />
</body>

</html>

【问题讨论】：

标签： cordova

【解决方案1】：

对于 Web SQL 数据库，如果数据库结构不存在，我们需要创建它。幸运的是，如果数据库不存在，openDatabase 会自动创建数据库，同样，我们使用 SQL 短语“如果不存在”来确保新的 checkins 表在已经存在时不会被覆盖。我们必须预先定义数据的结构，即 checkins 表中每一列的名称和类型。每行将代表一次签到。

this.db = openDatabase('geomood', '1.0', 'Geo-Mood Checkins', 8192);
this.db.transaction(function(tx) {
  tx.executeSql("create table if not exists " +
    "checkins(id integer primary key asc, time integer, latitude float," +
              "longitude float, mood string)",
    [],
    function() { console.log("siucc"); }
  );
});

setup: function(handler) {
  requestFileSystem(
    window.PERSISTENT,
    1024*1024,
    function(fs) {
      fs.root.getDirectory(
        "checkins",
        {}, // no "create" option, so this is a read op
        function(dir) {
          checkinsDir = dir;
          handler();
        },
        function() {
          fs.root.getDirectory(
            "checkins",
            {create: true},
            function(dir) {
              checkinsDir = dir;
              handler();
            },
            onError
          );
        }
      );
    },
    function(e) {
      console.log("error "+e.code+"");
    }
  );
}

【讨论】：

【解决方案2】：

			var db;
            
        window.onload=function()
        {
            document.getElementById('btnSave').addEventListener('click', saveData);
            db = window.openDatabase("geolocation",  "1.0", "Technorigins", 200000);
			
        }
        
        function saveData(e)
        {
           
            
           
            db.transaction(saveRecord, onSuccessdb, onErrordb);
			
        }
            
        function saveRecord(transaction)
        {
            var latitude= document.getElementById('latitude').value;
            var longitude= document.getElementById('longitude').value;
		
            transaction.executeSql('CREATE TABLE IF NOT EXISTS geol_cordova (id INTEGER PRIMARY KEY AUTOINCREMENT, latitude TEXT NOT NULL, longitude TEXT NOT NULL) ');
            
            var sql= "INSERT INTO geol_cordova (latitude,longitude) VALUES ('" + latitude +"', '" + longitude + "')";
           transaction.executeSql(sql); 
		   alert(sql);
		   transaction.executeSql("SELECT * FROM geol_cordova", [], getSuccess, getError);
        }
		
		 function getSuccess(tx, result)
        {
            var rows = result.rows;
            for(var x=0; x< rows.length; x++){
                var latitude = result.rows[x].latitude;
                var longitude = result.rows[x].longitude;
                var out = "<li>" + latitude + "<br/>" + longitude + "</li>";
                document.getElementById('geolo').innerHTML += out;
            }
            
            $('#geolo').listview('refresh');
        }
            
        function onSuccessdb()
        {
            alert("Location Saved");
        }
            
        function onErrordb(error)
        {
            alert("SQL error: ");
        }
		//-----------------
		function getError(e)
        {
            alert(e);
        }
            
        
		
		
			// Wait for device API libraries to load
				//
				document.addEventListener("deviceready", onDeviceReady, false);

				var watchID = null;

				// device APIs are available
				//
				function onDeviceReady() {
					// Throw an error if no update is received every 30 seconds
					var options = { timeout: 30000 , maximumAge : 60000};
					watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
				}

				// onSuccess Geolocation
				//
				function onSuccess(position) {
					var element = document.getElementById('geolocation');
					element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
										'Longitude: ' + position.coords.longitude     + '<br />' +
										'GPS Position: ' + distance('23.054996', '72.595171', position.coords.latitude, position.coords.longitude, 'ME') + ' Metres'  +
										'<hr />'      + element.innerHTML;
										document.getElementById('latitude').value=position.coords.latitude;
										document.getElementById('longitude').value=position.coords.longitude;
				}

				// onError Callback receives a PositionError object
				//
				function onError(error) {
					alert('code: '    + error.code    + '\n' +
						  'message: ' + error.message + '\n');
				}
				
				function distance(lat1, lon1, lat2, lon2, unit) {
				var radlat1 = Math.PI * lat1/180
				var radlat2 = Math.PI * lat2/180
				var theta = lon1-lon2
				var radtheta = Math.PI * theta/180
				var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
				dist = Math.acos(dist)
				dist = dist * 180/Math.PI
				dist = dist * 60 * 1.1515
				if (unit=="K") { dist = dist * 1.609344 }
				if (unit=="N") { dist = dist * 0.8684 }
				if (unit=="ME") { dist = dist * 1.609344 * 1000}
				return dist
				}

<div data-role="page">
        <div data-role="header"><h1>Database Storage</h1></div>
        <div data-role="main" class="ui-content">
		<p id="geolocation">Watching geolocation...</p>
		<input type="hidden" id="latitude" value="" />
		<input type="hidden" id="longitude" value="" />
		<button id="btnSave" type="submit">Save</button>
		<ul id="geolo" data-role="listview">
        </ul>
		<script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
		<link rel="stylesheet" type="text/css" href="css/overrides.css" />
		</div><!-- main-->
        </div><!-- page -->

【讨论】：

谢谢你的回答先生:)