Created
September 11, 2011 15:40
-
-
Save cfleschhut/1209718 to your computer and use it in GitHub Desktop.
jQuery Mobile Test [+ Geolocation, + Local Storage]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>t3n jQuery Mobile Geolocation</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.css" /> | |
| <script src="http://code.jquery.com/jquery-1.6.2.js"></script> | |
| <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.js"></script> | |
| <script type="text/javascript"> | |
| $(window).ready(function() { | |
| $("#btnEinchecken").click(function() { | |
| navigator.geolocation.getCurrentPosition(geolocation_action, errors_action); | |
| }); | |
| }); | |
| $("#letzterStandort").live("pageshow", function() { | |
| if (localStorage.geodaten) { | |
| $("#btnStandort").button("enable"); | |
| $("#btnStandort").click(storage_get); | |
| } | |
| }); | |
| var geodaten = []; | |
| function geolocation_action(position) { | |
| // alert(position.coords.latitude); | |
| var karte_url = "http://maps.google.com/maps/api/staticmap?sensor=true¢er=" + position.coords.latitude + "," + position.coords.longitude + "zoom=15&size=290x250&markers=color:red|label:A|" + position.coords.latitude + "," + position.coords.longitude; | |
| $("#karteAktuell").remove(); | |
| $("#karte").append($(document.createElement("img")).attr("src", karte_url).attr("id", "karteAktuell")); | |
| // localStorage.setItem("latitude", position.coords.latitude); | |
| // localStorage.setItem("longitude", position.coords.longitude); | |
| geodaten.push({ | |
| latitude: position.coords.latitude, | |
| longitude: position.coords.longitude | |
| }); | |
| localStorage.setItem("geodaten", JSON.stringify(geodaten)); | |
| } | |
| function errors_action(error) { | |
| switch(error.code) { | |
| case error.PERMISSION_DENIED: | |
| alert("Der Nutzer möchte keine Daten teilen."); | |
| break; | |
| case error.POSITION_UNAVAILABLE: | |
| alert("Die Geodaten sind nicht erreichbar."); | |
| break; | |
| case error.PERMISSION_DENIED: | |
| alert("Timeout erhalten"); | |
| break; | |
| default: | |
| alert ("Unbekannter Error"); | |
| break; | |
| } | |
| } | |
| function storage_get() { | |
| var geo = JSON.parse(localStorage.geodaten); | |
| var latitude = geo[geo.length - 1].latitude, | |
| longitude = geo[geo.length - 1].longitude; | |
| var karte_url = "http://maps.google.com/maps/api/staticmap?sensor=true¢er=" + latitude + "," + longitude + "zoom=15&size=290x250&markers=color:red|label:A|" + latitude + "," + longitude; | |
| $("#karteStand").remove(); | |
| $("#karteStandort").append($(document.createElement("img")).attr("src", karte_url).attr("id", "karteStand")); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div data-role="page" id="startseite"> | |
| <div data-role="header" data-position="fixed"> | |
| <h1>MyStandort</h1> | |
| </div> | |
| <div data-role="content"> | |
| <p>Hier können Sie ihren Standort einchecken. Viel Spaß dabei!</p> | |
| </div> | |
| <div data-role="footer" data-position="fixed"> | |
| <div data-role="navbar"> | |
| <ul> | |
| <li><a href="#startseite" class="ui-btn-active">Startseite</a></li> | |
| <li><a href="#letzterStandort">Letzter Standort</a></li> | |
| <li><a href="#einchecken">Einchecken</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-role="page" id="letzterStandort"> | |
| <div data-role="header" data-position="fixed"> | |
| <h1>MyStandort</h1> | |
| </div> | |
| <div data-role="content"> | |
| <h3>Lassen Sie sich ihren letzten Standort anzeigen:</h3> | |
| <p><button id="btnStandort" disabled="disabled">Anzeigen</button></p> | |
| <div id="karteStandort"></div> | |
| </div> | |
| <div data-role="footer" data-position="fixed"> | |
| <div data-role="navbar"> | |
| <ul> | |
| <li><a href="#startseite">Startseite</a></li> | |
| <li><a href="#letzterStandort" class="ui-btn-active">Letzter Standort</a></li> | |
| <li><a href="#einchecken">Einchecken</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-role="page" id="einchecken"> | |
| <div data-role="header" data-position="fixed"> | |
| <h1>MyStandort</h1> | |
| </div> | |
| <div data-role="content"> | |
| <h3>Checken Sie hier ihren derzeitigen Standort ein:</h3> | |
| <p><button id="btnEinchecken">Einchecken</button></p> | |
| <div id="karte"></div> | |
| </div> | |
| <div data-role="footer" data-position="fixed"> | |
| <div data-role="navbar"> | |
| <ul> | |
| <li><a href="#startseite">Startseite</a></li> | |
| <li><a href="#letzterStandort">Letzter Standort</a></li> | |
| <li><a href="#einchecken" class="ui-btn-active">Einchecken</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment