Wikizone - Benutzerbeiträge [de]

HTML5 - Geolocation

2013-02-02T15:30:56Z

79.240.86.250: /* Snippets */

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 ==
<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>

HTML5 - Geolocation

2013-02-02T14:50:10Z

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…“

HTML5

2013-02-02T14:27:03Z

79.240.86.250: /* Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback */

== HTML5 - Geolocation ==
=== Links ===
http://developersmix.wordpress.com/2011/08/16/html5-geolocation/

http://web.drsni.com/html5-geolocation/

http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/

http://aiminstitute.org/blog/2010/07/basic-geolocation-in-html5/

http://www.mozilla.com/en-US/firefox/geolocation/

== HTML 5 - allgemeines ==

== HTML 5 Snippets ==
=== Position des Nutzers bestimmen mit HTML5 und Google Gears als Fallback ===
siehe auch [[Google Maps]]

mehr und bessere Beispiele unter [[HTML5 - Geolocation]]
<pre>
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();

function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}

function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
</pre>