HTML5 implementiert die Funktion zum Abrufen geografischer Standortinformationen und zur Positionierung_html5-Tutorialfähigkeiten

Funktion getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
warning("Der Browser unterstützt keine Geolokalisierung."); 🎜>}


Der obige Code kann erkennen, dass die Methode getCurrentPosition() ausgeführt wird, wenn das Benutzergerät die Geolokalisierung unterstützt. Wenn getCurrentPosition() erfolgreich ausgeführt wird, wird ein Koordinatenobjekt an die im Parameter showPosition angegebene Funktion zurückgegeben. Der zweite Parameter showError der getCurrentPosition()-Methode wird zur Behandlung von Fehlern verwendet. Er gibt die Funktion an, die ausgeführt werden soll, wenn das Abrufen der Position des Benutzers fehlschlägt .

switch(error.code) {
case error.PERMISSION_DENIED:
Alert („Positionierung fehlgeschlagen, der Benutzer weigerte sich, die Geolokalisierung anzufordern“); > case error. TIMEOUT:
warning("Positionierung fehlgeschlagen, Anforderung zum Abrufen des Benutzerstandorts ist abgelaufen");
break ");
break;
}
}


Schauen wir uns noch einmal die Funktion showPosition() an. Rufen Sie den Breiten- und Längengrad von coords auf, um den Breiten- und Längengrad des Benutzers zu erhalten.





Code kopieren

Verwenden Sie Baidu Maps und Google Maps-Schnittstellen, um die Adresse des Benutzers zu erhalten


Oben haben wir erfahren, dass die Geolocation von HTML5 den Breitengrad und den Breitengrad des Benutzers ermitteln kann Längengrad, was wir also tun müssen Was benötigt wird, ist die Umwandlung abstrakter Längen- und Breitengrade in lesbare und aussagekräftige Informationen zum tatsächlichen geografischen Standort des Benutzers. Glücklicherweise bieten Baidu Maps und Google Maps diesbezüglich Schnittstellen. Wir müssen nur die von HTML5 erhaltenen Längen- und Breitengradinformationen an die Kartenschnittstelle übergeben, und der geografische Standort des Benutzers wird zurückgegeben, einschließlich Provinz- und Stadtinformationen und sogar Straßen. Hausnummer und andere detaillierte geografische Standortinformationen.
Wir definieren zunächst das Div, um den geografischen Standort auf der Seite anzuzeigen, und definieren jeweils id#baidu_geo und id#google_geo. Wir müssen nur die Schlüsselfunktion showPosition() ändern. Schauen wir uns zunächst die Interaktion der Baidu-Kartenschnittstelle an. Wir senden die Breiten- und Längengradinformationen über Ajax an die Baidu-Kartenschnittstelle, und die Schnittstelle gibt die entsprechenden Provinz-, Stadt- und Straßeninformationen zurück. Die Baidu-Kartenschnittstelle gibt eine Zeichenfolge von JSON-Daten zurück. Wir können die erforderlichen Informationen entsprechend unseren Anforderungen an div#baidu_geo anzeigen. Beachten Sie, dass hier die jQuery-Bibliothek verwendet wird und die jQuery-Bibliotheksdatei zuerst geladen werden muss.

function showPosition(position){
var latlon = position.coords.latitude ',' position.coords.longitude;

//baidu
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=" latlon "&output=json&pois=0";
$.ajax({
Typ: "GET",
Datentyp: "jsonp",
URL: URL,
beforeSend: function(){
$("#baidu_geo ").html('正在定位...');
},
success: function (json) {
if(json.status==0){
$("#baidu_geo ").html(json.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon "地址位置获取失败");
}
});
});

function showPosition(position){
var latlon = position.coords.latitude ',' position.coords.longitude;

//google
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng=' latlon '&sprache=CN';
$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位. ..');
},
success: function (json) {
if(json.status=='OK'){
var results = json.results;
$. every(results,function(index,array){
if(index==0){
$("#google_geo").html(array['formatted_address']);
}
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon "地址位置获取失败"); > }
});
}