HTML5 melaksanakan fungsi mendapatkan maklumat lokasi geografi dan kemahiran tutorial positioning_html5

function getLocation(){
jika (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
} else{
alert("Pelayar tidak menyokong geolokasi."
}
}

function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert ("Penempatan gagal , pengguna enggan meminta geolokasi"); > ralat kes. TIMEOUT:
makluman("Penedudukan gagal, permintaan untuk mendapatkan lokasi pengguna tamat masa");
rehat; ");
break;
}
}


Mari lihat fungsi showPosition() sekali lagi. Panggil latitud dan longitud bagi kord untuk mendapatkan latitud dan longitud pengguna.

Gunakan Peta Baidu dan antara muka Peta Google untuk mendapatkan alamat pengguna


Di atas kami mengetahui bahawa Geolokasi HTML5 boleh mendapatkan latitud pengguna dan longitud, jadi apa yang perlu kita lakukan Apa yang diperlukan ialah menukar longitud dan latitud abstrak kepada maklumat lokasi geografi pengguna sebenar yang boleh dibaca dan bermakna. Nasib baik, Peta Baidu dan Peta Google menyediakan antara muka dalam hal ini Kami hanya perlu menghantar maklumat longitud dan latitud yang diperolehi oleh HTML5 ke antara muka peta, dan lokasi geografi pengguna akan dikembalikan, termasuk maklumat wilayah dan bandar, dan juga jalan, Nombor rumah dan maklumat lokasi geografi terperinci lain.
Kami mula-mula menentukan div untuk memaparkan lokasi geografi pada halaman, masing-masing mentakrifkan id#baidu_geo dan id#google_geo. Kita hanya perlu mengubah suai fungsi utama showPosition(). Mari lihat dahulu interaksi antara muka peta Baidu Kami menghantar maklumat latitud dan longitud ke antara muka peta Baidu melalui Ajax, dan antara muka akan mengembalikan maklumat wilayah, bandar dan jalan yang sepadan. Antara muka peta Baidu mengembalikan rentetan data JSON Kami boleh memaparkan maklumat yang diperlukan untuk div#baidu_geo mengikut keperluan kami. Ambil perhatian bahawa perpustakaan jQuery digunakan di sini dan fail perpustakaan jQuery perlu dimuatkan terlebih dahulu.

fungsi showPosition(position){
var latlon = position.coords.latitud ',' position.coords.longitud;

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