HTML5 - Geolocation
Mit html5 steht in den meisten Browsern das navigator.geolocation object zur Verfügung, mit dem man per JS die Position des Browsers feststellen kann. Folgende Methoden stehen zur Verfügung
Links[Bearbeiten]
http://diveintohtml5.info/geolocation.html
Methoden[Bearbeiten]
void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options) long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options) void navigator.geolocation.clearWatch(watch_position_id)
getCurrentPosition[Bearbeiten]
Kann der Browser die Position feststellen wird die Funktion die im ersten parameter angegeben wurde aufgerufen. An diese wird ein Positionsobjekt übergeben (s.u.). Im Fehlerfall wird die zweite Funktion aufgerufen und der Fehlergrund übergeben.
watchPosition[Bearbeiten]
Mit der Funktion watchPosition wird die success_callback_funktion immer aufgerufen, wenn der Browser eine Positionsänderung feststellt. Das kann auch eine Verbesserung der Genauigkeit bedeuten. Es gibt ein jQuery Plugin, welches die Genauigkeit einer Positionsbestimmung verbessert, indem es watchPosition statt getCurrentPosition verwendet.
Die Funktion gibt eine WatchPositionID zurück, über die man den WatchProzess beenden kann. Dazu nutzt man die Funktion clearWatch
clearWatch[Bearbeiten]
Beendet einen watch prozess.
https://github.com/sash/jquery-geolocation
Options[Bearbeiten]
position_options JSON-style string
enableHighAccuracy – boolean (true/false) Dabei bleibt es dem Gerät überlassen, was es unter High Accuracy versteht maximumAge – (in milliseconds) Beinflußt das Cache Verhalten des Gerätes. timeout – The maximum time (in milliseconds) for which you are prepared to allow the device to try to obtain a Geo location
Success Callback Funktion[Bearbeiten]
Bei erfolgreichem Aufruf (Position wird zurückgegeben)
The success_callback_function is passed a single parameter, a position object which has the following properties:
coords.latitude – The current latitude reading coords.longitude – The current longitude reading coords.accuracy – The accuracy of the current latitude and longitude readings (in metres) coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour) coords.altitude – The current altitude reading (in metres) coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)
Den Zeitstempel der letzten Position bekommt man über
new Date(position.timestamp);
Beispiel[Bearbeiten]
wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});
Snippets[Bearbeiten]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="libs/jquery-1.9.0.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true"></script>
<title>
</title>
<script>
var watch = null;
var markers = []; // Array of Markers (one for each position found)
$(document).ready(function() {
google.maps.event.addDomListener(window, 'load', initialize);
});
function initialize(){
// init map
var mapOptions = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.31, -11.95),
new google.maps.LatLng(58.21, 41.74)
);
map.fitBounds(defaultBounds);
// init buttons
jQuery("#btnStartWatch").click(start_watch);
jQuery("#btnStopWatch").click(stop_watch);
}
function start_watch() {
if (watch == null) {
watch = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors);
}
}
function stop_watch() {
if (watch != null) {
navigator.geolocation.clearWatch(watch);
watch = null;
}
}
function handle_errors(error) {
switch(error.code)
{
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;
case error.TIMEOUT: alert("retrieving position timedout");
break;
default: alert("unknown error");
break;
}
}
function handle_geolocation_query(position) {
// Update info
var text = "Latitude: " + position.coords.latitude + "<br/>" +
"Longitude: " + position.coords.longitude + "<br/>" +
"Accuracy: " + position.coords.accuracy + "m<br/>" +
"Time: " + new Date(position.timestamp);
jQuery("#info").html(text);
// Update map
actPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
map.panTo(actPos);
map.setZoom(13);
// Set Marker
var marker = new google.maps.Marker({
map: map,
title: "here i am",
position: actPos
});
}
</script>
</head>
<body>
<div>
<button id="btnStartWatch" >Monitor my location
</button>
<button id="btnStopWatch" >Stop monitoring
</button>
</div>
<div id="map_canvas" style="height: 400px; width: 640px;">
</div>
<div id="info"></div>
</body>
</html>
