Beranda>Tutorial Desain Web>tutorial HTML

Cara menggunakan fungsi penentuan posisi geolokasi html5

Penulis：Eve Cole Waktu Pembaruan：2025-08-20 01:32:02

Menggunakan kode JavaScript yang relatif sederhana, Anda dapat membuat aplikasi web yang dapat menentukan detail lokasi geografis pengguna, termasuk garis lintang dan bujur dan ketinggian. Beberapa aplikasi web bahkan dapat menyediakan fungsi navigasi dengan memantau pergerakan lokasi pengguna dari waktu ke waktu, yang juga mengintegrasikan sistem peta seperti API Googlemaps.

HTML5 menyediakan API geolokasi untuk menentukan lokasi pengguna. Kami dapat menggunakan fitur HTML5 ini untuk mengembangkan aplikasi berdasarkan informasi geolokasi. Artikel ini menggabungkan contoh untuk berbagi dengan Anda cara menggunakan HTML5 dan menggunakan antarmuka Baidu dan Google Map untuk mendapatkan informasi lokasi geografis yang akurat pengguna.

Geolokasi adalah fitur baru HTML5, sehingga hanya dimungkinkan untuk menjalankan browser modern yang mendukung HTML5, terutama perangkat genggam seperti iPhone, di mana geolokasi lebih akurat. Pertama, kita perlu mendeteksi apakah browser perangkat pengguna mendukung geolokasi, dan jika demikian, dapatkan informasi geografis. Perhatikan bahwa fitur ini dapat melanggar privasi pengguna. Kecuali jika persetujuan pengguna adalah, informasi lokasi pengguna tidak tersedia, jadi ketika kami mengakses aplikasi, kami akan meminta apakah akan mengizinkan geolokasi, dan tentu saja kami dapat memilih untuk mengizinkan.

  1. functionGetLocation () {
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition (showposition, showerror);
  4. }kalau tidak{
  5. waspada (browser tidak mendukung geolokasi.);
  6. }
  7. }

Kode di atas menunjukkan bahwa jika perangkat pengguna mendukung geolokasi, jalankan metode getCurrentPosition (). Jika getCurrentPosition () berjalan dengan sukses, objek koordinat dikembalikan ke fungsi yang ditentukan dalam showposisi parameter. Parameter kedua dari metode getCurrentPosition () digunakan untuk menangani kesalahan, yang menentukan fungsi yang berjalan ketika lokasi pengguna gagal mendapatkannya.

Pertama -tama mari kita lihat fungsi showerror (), yang menentukan penanganan beberapa kode kesalahan saat mendapatkan lokasi geografis pengguna:

  1. functionshowerror (error) {
  2. switch (error.code) {
  3. caseerror.permission_desied:
  4. peringatan (lokalisasi gagal, pengguna menolak untuk meminta geolokasi);
  5. merusak;
  6. caseerror.position_unavailable:
  7. Peringatan (Gagal Lokalisasi, Informasi Lokasi tidak tersedia);
  8. merusak;
  9. caseerror.timeout:
  10. peringatan (Lokasi gagal, meminta untuk mendapatkan batas waktu lokasi pengguna);
  11. merusak;
  12. caseerror.unknown_error:
  13. peringatan (lokalisasi gagal, sistem penentuan posisi gagal);
  14. merusak;
  15. }
  16. }

Mari kita lihat fungsi showposition (), dan panggil garis lintang dan bujur koord untuk mendapatkan garis lintang dan bujur pengguna.

  1. functionShowPosition (position) {
  2. varlat = position.coords.latitude; // latitude
  3. varlag = position.coords.longitude; // bujur
  4. alert ('lat:'+lat+', bujur:'+lag);
  5. }

Gunakan Baidu Maps dan Google Maps Interfaces untuk mendapatkan alamat pengguna

Seperti yang kita pahami bahwa geolokasi HTML5 dapat memperoleh garis lintang dan bujur pengguna, yang perlu kita lakukan adalah mengubah garis lintang abstrak dan bujur menjadi informasi lokasi geografis pengguna nyata yang dapat dibaca. Untungnya, Baidu Maps dan Google Maps menyediakan antarmuka dalam hal ini. Kita hanya perlu meneruskan informasi garis lintang dan bujur yang diperoleh HTML5 ke antarmuka peta, dan itu akan mengembalikan lokasi geografis pengguna, termasuk informasi provinsi, kota dan regional, dan bahkan informasi lokasi geografis terperinci seperti jalanan dan nomor rumah.

Kami pertama -tama mendefinisikan div untuk menampilkan lokasi geografis di halaman, dan mendefinisikan ID#baidu_geo dan ID#google_geo masing -masing. Kami hanya perlu memodifikasi fungsi kunci showposition (). Pertama -tama mari kita lihat interaksi antarmuka peta Baidu. Kami mengirimkan informasi garis lintang dan bujur ke antarmuka peta Baidu melalui Ajax, dan antarmuka akan mengembalikan informasi provinsi, kota, dan jalan yang sesuai. Baidu Map Interface Mengembalikan String Data JSON, dan kami dapat menampilkan informasi yang diperlukan ke Div#Baidu_Geo sesuai dengan kebutuhan kami. Perhatikan bahwa perpustakaan jQuery digunakan di sini, dan file perpustakaan jQuery perlu dimuat terlebih dahulu.

  1. functionShowPosition (position) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. // Baidu
  5. varUrl = http: //api.map.baidu.com/geocoder/v2/? ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderreverse & location =+latlon+& output = json & pois = 0;
  6. $ .Ajax ({
  7. Jenis: Dapatkan,
  8. DataType: JSONP,
  9. URL: URL,
  10. beforesend: function () {
  11. $ (#baidu_geo) .html ('Locating ...');
  12. },
  13. Success: function (json) {
  14. if (json.status == 0) {
  15. $ (#baidu_geo) .html (json.result.formatted_address);
  16. }
  17. },
  18. ERROR: FUNGSI (XMLHTTPREQUEST, TextStatus, Errorthrown) {
  19. $ (#baidu_geo) .html (Latlon+Alamat Lokasi Gagal);
  20. }
  21. });
  22. });

Mari kita lihat interaksi antarmuka Google Maps. Demikian pula, kami mengirim informasi garis lintang dan bujur ke antarmuka Google Maps melalui AJAX, dan antarmuka akan mengembalikan detail provinsi, kota, dan jalan yang sesuai. Antarmuka Google Maps juga mengembalikan string data JSON. Data JSON ini lebih rinci daripada yang dikembalikan oleh antarmuka peta Baidu. Kami dapat menampilkan informasi yang diperlukan ke div#google_geo sesuai dengan kebutuhan kami.

  1. functionShowPosition (position) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. // google
  5. varUrl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& bahasa = cn';
  6. $ .Ajax ({
  7. Jenis: Dapatkan,
  8. URL: URL,
  9. beforesend: function () {
  10. $ (#google_geo) .html ('Locating ...');
  11. },
  12. Success: function (json) {
  13. if (json.status == 'ok') {
  14. Varresult = JSON.RESULTS;
  15. $ .each (hasil, fungsi (indeks, array) {
  16. if (index == 0) {
  17. $ (#google_geo) .html (array ['formated_address']);
  18. }
  19. });
  20. }
  21. },
  22. ERROR: FUNGSI (XMLHTTPREQUEST, TextStatus, Errorthrown) {
  23. $ (#google_geo) .html (Latlon+Alamat Lokasi Gagal);
  24. }
  25. });
  26. }

Kode di atas mengintegrasikan antarmuka peta baidu dan antarmuka peta Google ke dalam fungsi showposition () masing -masing, dan kita dapat menyebutnya sesuai dengan situasi aktual. Tentu saja, ini hanya aplikasi sederhana. Kami dapat mengembangkan banyak aplikasi kompleks berdasarkan contoh sederhana ini. Disarankan untuk menggunakan browser seluler untuk mengakses demonstrasi demo.

Artikel Terkait