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

HTML5 bietet eine Geolokalisierungsfunktion (Geolocation-API), die den Standort des Benutzers bestimmen kann. Wir können diese Funktion von HTML5 verwenden, um Anwendungen basierend auf Geolokalisierungsinformationen zu entwickeln. In diesem Artikel erfahren Sie anhand von Beispielen, wie Sie HTML5 verwenden und die Baidu- und Google Maps-Schnittstellen verwenden, um genaue geografische Standortinformationen der Benutzer zu erhalten.

Quellcode-Download: Klicken Sie hier zum Herunterladen

So verwenden Sie die HTML5-Geolocation-Funktion

Geolocation ist eine neue Funktion von HTML5 und kann daher nur auf modernen Browsern ausgeführt werden, die HTML5 unterstützen, insbesondere auf Handheld-Geräten wie iPhones, bei denen die Geolokalisierung genauer ist. Zuerst müssen wir feststellen, ob der Gerätebrowser des Benutzers die Geolokalisierung unterstützt, und wenn ja, die geografischen Informationen abrufen. Beachten Sie, dass diese Funktion die Privatsphäre des Benutzers verletzen kann, wenn der Benutzer nicht zustimmt. Daher werden wir beim Zugriff auf die Anwendung gefragt, ob wir die Geolokalisierung zulassen möchten .

Code kopieren

Der Code lautet wie folgt:

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 .

Sehen wir uns zunächst die Funktion showError() an, die einige Methoden zur Fehlercodebehandlung festlegt, wenn die Ermittlung des geografischen Standorts des Benutzers fehlschlägt:

Code kopieren Der Code lautet wie folgt:

function showError(error){

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

Der Code lautet wie folgt:

Funktion showPosition(position){

var lat = position.coords.latitude; //Latitude var lag = position.coords.longitude; //Longitude warning('Latitude:' lat ',Longitude:' lag); >}

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.

Code kopieren

Der Code lautet wie folgt:

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 "地址位置获取失败");
}
});
});

再来看谷歌地图接口交互.同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息.谷歌地图接口返回的也是一串JSON – JSON – JSON geo。

复制代码

代码如下:

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 "地址位置获取失败"); > }
});
}

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用.当然这只是一个简单的应用，我们可以根据这个简单的示例开发出很多复杂的应用,建议用手机浏览器访问DEMO演示.