exali.de
html5-geolocation-api

Frage gestellt von Daniel am 10.10.2012

Wie kann ich mit der HTML5 Geolocation API die Distanz zu einer statischen Position berechnen?

Wie kann ich die durch die HTML5 Geolocation API ermittelte Position mit einer vorbestimmten, statischen Position vergleichen, so dass dem Besucher dieser kleinen Web App nur die gegenwärtige Entfernung zum Ziel in Metern ausgegeben wird?

Mir wäre es bei dieser Anwendung wichtig dass der Besucher der Website die Daten des Fixpunktes nicht etwa aus dem Quellcode auslesen kann.

Ist es möglich die Entfernung per Watch dynamisch auszugeben?
Ich denke an eine Anwendung auf Android/ iOS.

Beste Grüße,
Daniel

HTML5 Geolocation API: Entfernung zwischen zwei Orten berechnen

Hallo Daniel,

durch eine Kombination von Javascript und PHP über einen AJAX-Request lässt sich dein Vorhaben problemlos realisieren. Da die Koordinaten des statischen Fixpunktes im PHP-Quellcode hinterlegt werden, lassen sie sich durch den Website-Besucher auch nicht auslesen.

Im Folgenden Video findest du das versprochene Tutorial:

Quellcode der index.php

Quellcode der ajax.php

Weiterführende Informationen

Geb deinen Senf dazu

GRAVATAR
joe am 24.10.2012 um 13:16 Uhr

Hallo,
Du berechnes hier die Luftline zwischen zwei Punkten.
Ich glaube das die Google.Map.Api das auch kann, allerdings mit den brauchbareren Starßenkilometern.
Hast Du da einen Tipp?
mfg

GRAVATAR
Torben Leuschner am 24.10.2012 um 13:32 Uhr

Hallo Joe,

mittels der Google Maps API lässt sich recht simpel (sogar serverseitig) die Route und damit auch die Straßen-Distanz zwischen zwei Orten herausfinden.

Falls Du dabei Hilfe brauchst, formulier es doch einfach als Frage unter "Frage stellen"... :)

Viele Grüße,
Torben

GRAVATAR
Daniel am 27.10.2012 um 11:21 Uhr

Hallo Torben,
ich habe eine weitere Frage, die sich ganz gut an dem obigen Quellcode festmachen lässt.
Wie passe ich die Ausgabe des Textes aus ajax.php und index.php an die verschiedenen mobilen Endgeräte an?

Beste Grüße,
Daniel

GRAVATAR
Torben Leuschner am 27.10.2012 um 11:26 Uhr

Hi Daniel,

verstehe deine Anforderung ehrlich gesagt nicht ganz. Was willst du genau anpassen?

Viele Grüße,
Torben

GRAVATAR
Daniel am 27.10.2012 um 12:30 Uhr

Hi Torben,
ich möchte dass der Text je nach Endgerät passend skaliert wird. So dass er weder auf einem Desktop nur Teile des Schirms füllt noch bei mobilen Geräten unlesbar klein verschwindet.

Beste Grüße,
Daniel

GRAVATAR
Torben Leuschner am 27.10.2012 um 12:31 Uhr

Hi Daniel,

dann schau mal hier:
http://frag.torbenleuschner.de/1/6/wie-entwickelt-man-mobile-webseiten/

Gruß Torben

GRAVATAR
Eddi am 21.08.2013 um 00:21 Uhr

hallo, das ist genau, was ich suchte. zunächst vielen dank dafür. nun habe ich es erfolgreich (testmäßig) eingebaut. jedoch bekomme ich 0 km bzw. meter (*1000) angezeigt, obwohl google maps 700 m anzeigt. gibts hier irgendwo rundungsfehler? oder wie lässt sich das erklären? gibts ne möglichkeit schlank nen routenplaner einzubauen und gleich die per gps ermittelten geodaten zu übergeben und die zieladresse? VG