HTML5 melaksanakan fungsi mendapatkan maklumat lokasi geografi dan kemahiran tutorial positioning_html5

HTML5 menyediakan fungsi geolokasi (Geolocation API), yang boleh menentukan lokasi pengguna Kami boleh menggunakan ciri HTML5 ini untuk membangunkan aplikasi berdasarkan maklumat geolokasi. Artikel ini menggunakan contoh untuk berkongsi dengan anda cara menggunakan HTML5 dan menggunakan antara muka Baidu dan Peta Google untuk mendapatkan maklumat lokasi geografi pengguna yang tepat.

Muat turun kod sumber: Klik di sini untuk memuat turun

Cara menggunakan fungsi geolokasi HTML5

Geolokasi ialah ciri baharu HTML5, jadi ia hanya boleh dijalankan pada penyemak imbas moden yang menyokong HTML5, terutamanya peranti pegang tangan seperti iPhone, di mana geolokasi lebih tepat. Mula-mula kita perlu mengesan sama ada penyemak imbas peranti pengguna menyokong geolokasi, dan jika ya, dapatkan maklumat geografi tersebut. Ambil perhatian bahawa ciri ini mungkin melanggar privasi pengguna Melainkan pengguna bersetuju, maklumat lokasi pengguna tidak tersedia Oleh itu, apabila kami mengakses aplikasi, kami akan digesa sama ada untuk membenarkan geolokasi .

Salin kod

Kod tersebut adalah seperti berikut:

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

Kod di atas boleh mengetahui bahawa jika peranti pengguna menyokong geolokasi, kaedah getCurrentPosition() dijalankan. Jika getCurrentPosition() berjalan dengan jayanya, objek koordinat dikembalikan kepada fungsi yang dinyatakan dalam parameter showPosition Parameter kedua showError kaedah getCurrentPosition() digunakan untuk mengendalikan ralat .
Mari kita lihat dahulu fungsi showError(), yang menetapkan beberapa kaedah pengendalian kod ralat apabila gagal mendapatkan lokasi geografi pengguna:

Salin kod

Kodnya adalah seperti berikut:

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.

Salin kod


Kod tersebut adalah seperti berikut:

function showPosition(position){ var lat = position.coords.latitude; //Latitud var lag = position.coords.longitud; //Longitud alert('Latitud:' lat ',Longitud:' lag); >}

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.

Salin kod


Kod tersebut adalah seperti berikut:

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

再来看谷歌地图接口交互。同样我们将经纬度信息通近Ajax方口交互。同样我们将经纬度信息通近Ajax方通近Ajax方通叭叭，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据度地图接口返回的要更详细，我们可以根据需求将需示的。 🎜>

复制代码代码如下:

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

//google
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng=' latlon '&language=CN';
$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位. ..');
},
kejayaan: function (json) {
if(json.status=='OK'){
var results = json.results; setiap (hasil, fungsi(indeks, tatasusunan){
jika(indeks==0){
$("#google_geo").html(susun['formatted_address']);
}
});
}
},
ralat: fungsi (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon "地址位置获取失败"); > }
});
}


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