Demo
Aquí se puede ver un código que muestra la utilización de la geolocalización:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Geolocation</title>
</head>
<body>
<div class="app">
<h1>Geolocalización</h1>
<div id="deviceready" class="blink">
<div></div>
<button onclick="clearWatchID();">STOP</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
// carga de API
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// Cuando este todo cargado
//
function onDeviceReady(){
var options = { enableHighAccuracy: true };//para que tenga mas precision
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// Cuando es correcto
//
function onSuccess(position){
$("#deviceready div").html(
'Latitud: ' + position.coords.latitude + '<br />' +
'Longitud: ' + position.coords.longitude
);
}
// Cuando da error
//
function onError(error){
alert("Error: " + error.code);
}
// Limpiar el id
//
function clearWatchId(){
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
});
</script>
</body>
</html>