So verwenden Sie die HTML5 -Geolocation -Positionierungsfunktion

Mit einem relativ einfachen JavaScript -Code können Sie Webanwendungen erstellen, mit denen die Details des geografischen Standorts des Benutzers einschließlich Breitengrad, Längengrad und Höhe ermittelt werden können. Einige Webanwendungen können sogar Navigationsfunktionen bereitstellen, indem die Bewegung von Benutzerstandorten im Laufe der Zeit überwacht wird, die auch Kartensysteme wie die Googlemaps -API integrieren.

HTML5 bietet Geolocation -API zur Bestimmung des Benutzerstandorts. Wir können diese Funktion von HTML5 verwenden, um Anwendungen basierend auf Geolokalisierungsinformationen zu entwickeln. In diesem Artikel werden Beispiele kombiniert, die Ihnen mithilfe von HTML5 mithilfe von Baidu und Google Map -Schnittstellen teilen können, um die genauen geografischen Standortinformationen der Benutzer zu erhalten.

Geolocation ist ein neues Merkmal von HTML5, daher ist es nur möglich, auf modernen Browsern zu laufen, die HTML5 unterstützen, insbesondere auf Handheld -Geräten wie iPhones, bei denen die Geolokalisierung genauer ist. Zunächst müssen wir erkennen, ob der Browser des Benutzergeräts Geolokalisierung unterstützt, und wenn ja, erhalten Sie geografische Informationen. Beachten Sie, dass diese Funktion möglicherweise gegen die Privatsphäre des Benutzers verstößt. Sofern die Einwilligung des Benutzers nicht möglich ist, sind die Standortinformationen des Benutzers nicht verfügbar. Wenn wir auf die Anwendung zugreifen, werden wir auffordern, ob die Geolokalisierung zuzulassen, und natürlich können wir uns für die Erlaubnis entscheiden.

1. functionGetLocation () {
2. if (navigator.geolocation) {
3. navigator.geolocation.getCurrentPosition (Showposition, Duschror);
4. }anders{
5. Alarm (der Browser unterstützt die Geolokalisierung nicht.);
6. }
7. }

Der obige Code zeigt, dass, wenn das Benutzergerät die Geolokalisierung unterstützt, die Methode GetCurrentPosition () ausführen. Wenn GetCurrentPosition () erfolgreich ausgeführt wird, wird ein Koordinatenobjekt an die in der Parameter -Showposition angegebene Funktion zurückgegeben. Der zweite Parameter der Methode GetCurrentPosition () wird verwendet, um den Fehler zu verarbeiten, wodurch die Funktion angegeben wird, die ausgeführt wird, wenn der Benutzerort nicht abgerufen wird.

Schauen wir uns zunächst den Funktionsduschror () an, der die Behandlung einiger Fehlercodes beim Erhalten des geografischen Standorts des Benutzers angibt:

1. FunktionshowerRor (Fehler) {
2. Switch (error.code) {
3. CaseError.Permission_Denied:
4. Warnung (Lokalisierung fehlgeschlagen, der Benutzer weigert sich, Geolokalisierung anzufordern);
5. brechen;
6. caseError.position_unAvailable:
7. Warnung (Lokalisierung fehlgeschlagen, Standortinformationen sind nicht verfügbar);
8. brechen;
9. CaseError.Timeout:
10. ALERT (FAIL -FAILD, BRAGEN SIE, UMSCHLUSS ARTEOPSOTORITION ZEIT);
11. brechen;
12. CaseError.unnown_error:
13. Alarm (Lokalisierung fehlgeschlagen, Positionierungssystem fehlgeschlagen);
14. brechen;
15. }
16. }

Schauen wir uns die Funktionshowposition () an und rufen Sie den Breitengrad und Längengrad der Koordeln auf, um den Breitengrad und die Länge des Benutzers zu erhalten.

1. Funktionshowposition (Position) {
2. varlat = Position.coords.latitude; // Breite
3. varlag = Position.coords.longitude; // Länge
4. alert ('lat:'+lat+', Länge:'+lag);
5. }

Verwenden Sie Baidu Maps und Google Maps -Schnittstellen, um Benutzeradressen zu erhalten

Da wir verstehen, dass die Geolokalisierung von HTML5 den Breiten- und Längengrad des Benutzers erhalten kann, müssen wir abstrakte Breitengrad und Längengrad in lesbare, aussagekräftige geografische Standortinformationen umwandeln. Glücklicherweise bieten Baidu Maps und Google Maps in dieser Hinsicht Schnittstellen an. Wir müssen nur die von HTML5 erhaltenen Breiten- und Längengradinformationen an die Kartenschnittstelle übergeben, und es wird den geografischen Standort des Benutzers, einschließlich der Provinz-, kommunalen und regionalen Informationen sowie sogar detaillierte geografische Standortinformationen wie Straßen und Hauszahlen zurückgeben.

Wir definieren zunächst die DIV, um den geografischen Ort auf der Seite anzuzeigen und ID#Baidu_Geo bzw. ID#Google_GEO. Wir müssen nur die Schlüsselfunktionshowposition () ändern. Schauen wir uns zunächst die Interaktion zwischen Baidu Map Interface an. Wir senden die Informationen zum Breitengrad und der Länge der Länge über AJAX an die Baidu -Kartenschnittstelle, und die Schnittstelle gibt die entsprechenden Informationen zur Provinz-, Gemeinde- und Straßeninformationen zurück. Die Baidu Map Interface gibt eine Reihe von JSON -Daten zurück, und wir können die erforderlichen Informationen an Div#Baidu_Geo entsprechend unseren Anforderungen anzeigen. Beachten Sie, dass die JQuery -Bibliothek hier verwendet wird und die JQuery -Bibliotheksdatei zuerst geladen werden muss.

1. Funktionshowposition (Position) {
2. varlatlon = Position.coords.latitude+','+Position.coords.longitude;
4. // Baidu
5. varurl = http: //api.map.baidu.com/geocoder/v2/? ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderReverse & latlon+& output = json & pois = 0;
6. $ .ajax ({{{
7. Typ: Get,
8. Datentyp: JSONP,
9. URL: URL,
10. Beforesend: function () {
11. $ (#baidu_geo) .html ('Locating ...');
12. },
13. Erfolg: Funktion (json) {
14. if (json.status == 0) {
15. $ (#baidu_geo) .html (json.result.formatted_address);
16. }
17. },
18. Fehler: Funktion (xmlhttprequest, textstatus, errorthrown) {
19. $ (#baidu_geo) .html (Latlon+Adressort fehlgeschlagen);
20. }
21. });
22. });

Schauen wir uns die Interaktion mit Google Maps Interface an. In ähnlicher Weise senden wir über AJAX Breiten- und Längengradinformationen an die Schnittstelle von Google Maps, und die Schnittstelle wird die entsprechenden Details der Provinz, Stadt und Straßen zurückgeben. Die Google Maps -Schnittstelle gibt auch eine Zeichenfolge von JSON -Daten zurück. Diese JSON -Daten sind detaillierter als die von Baidu Maps Interface zurückgegeben. Wir können die erforderlichen Informationen an Div#Google_Geo entsprechend unseren Anforderungen anzeigen.

1. Funktionshowposition (Position) {
2. varlatlon = Position.coords.latitude+','+Position.coords.longitude;
4. // Google
5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& sprach = cn';
6. $ .ajax ({{{
7. Typ: Get,
8. URL: URL,
9. Beforesend: function () {
10. $ (#google_geo) .html ('Locating ...');
11. },
12. Erfolg: Funktion (json) {
13. if (json.status == 'ok') {
14. varresults = json.Results;
15. $ .each (Ergebnisse, Funktion (Index, Array) {
16. if (index == 0) {
17. $ (#google_geo) .html (array ['formated_address']);
18. }
19. });
20. }
21. },
22. Fehler: Funktion (xmlhttprequest, textstatus, errorthrown) {
23. $ (#google_geo) .html (Latlon+Adressspeicherort fehlgeschlagen);
24. }
25. });
26. }

Der obige Code integriert die Baidu -Kartenschnittstelle und die Google Map -Schnittstelle in die Funktion showposition () () und wir können sie gemäß der tatsächlichen Situation aufrufen. Dies ist natürlich nur eine einfache Anwendung. Wir können viele komplexe Anwendungen basierend auf diesem einfachen Beispiel entwickeln. Es wird empfohlen, einen mobilen Browser zu verwenden, um auf die Demo -Demonstration zuzugreifen.