HTML5 - Geolocation - Versionsgeschichte

Steff am 25. Oktober 2018 um 06:59 Uhr

2018-10-25T06:59:19Z

79.240.86.250: /* Snippets */

2013-02-02T15:30:56Z

Snippets

79.240.86.250: Die Seite wurde neu angelegt: „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 M…“

2013-02-02T14:50:10Z

Die Seite wurde neu angelegt: „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 M…“

Neue Seite

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

== Methoden ==

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===
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 ===
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 ===
Beendet einen watch prozess.

https://github.com/sash/jquery-geolocation

=== Options ===
'''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 ==
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 ==
wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

== Snippets ==

← Nächstältere Version		Version vom 25. Oktober 2018, 06:59 Uhr
Zeile 1:		Zeile 1:
	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		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 ==
		+	http://diveintohtml5.info/geolocation.html

	== Methoden ==		== Methoden ==

← Nächstältere Version		Version vom 2. Februar 2013, 15:30 Uhr
Zeile 47:		Zeile 47:

	== Snippets ==		== Snippets ==
		+	<pre>
		+	<!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>
		+	</pre>