Beranda>Tutorial Desain Web>tutorial HTML

Cara memanggil Aplikasi Peta Baidu di Html5

Penulis：Eve Cole Waktu Pembaruan：2025-01-18 08:00:02

Baru-baru ini, saya mengambil alih sebuah persyaratan, yang memerlukan pengembangan hybrid. Setelah front-end selesai dengan h5, halaman tersebut dapat disematkan ke ios dan android. Navigasi peta Baidu Map perlu digunakan. Poin fungsi spesifiknya adalah sebagai berikut:

Jika Baidu Map diinstal di ponsel (ios, android), klik tombol navigasi untuk menjalankan aplikasi Baidu Map

Jika tidak, buka Navigasi Peta Baidu sisi web

Link dokumen API Peta Baidu yang perlu digunakan adalah sebagai berikut: http://lbsyun.baidu.com/index.php?title=uri/api/ios

Kode pertama: 

 // Coba aktifkan aplikasi Peta Baidu window.location.href = skema; ​​var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / Ketika Setelah berhasil membangkitkan aplikasi Baidu Map, kembali ke halaman h5. Saat ini, endTime - startTime harus lebih besar dari batas waktu + 200; jika kebangkitan gagal, buka Navigasi Peta Baidu sisi web jika (!startTime ||. (Waktu berakhir - Waktu mulai) < (batas waktu + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; ;

pertanyaan:

Tidak ada masalah dengan kode di atas yang berjalan di mesin Android, tetapi pengatur waktu setTimeout selalu dijalankan di iOS, jadi jika berada di sisi iOS, meskipun aplikasi berada di latar belakang, kode h5-nya akan tetap dijalankan.

Jadi kita perlu mengubah cara tersebut.

  1. Menggunakan metode polling
  2. Cobalah untuk membangkitkan aplikasi Baidu Map dalam waktu 600 ms. Setelah gairah gagal, tentukan apakah h5 berada di latar depan atau di latar belakang. Jika berada di latar depan, buka aplikasi Baidu Map sisi web. Terlepas dari apakah gairah berhasil atau gagal, pengatur waktu akan dihapus setelah 200 ms.

Kode yang dimodifikasi: 

 var startTime = Tanggal.sekarang(); var count = 0; var endTime = 0; var t = setInterval(fungsi () { hitungan += 1; endTime = Tanggal.sekarang() - startTime; if (endTime > 800) { clearInterval(t); } if (hitungan < 30) kembali; jika (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';

Kode lengkap: 

 function wakeBaidu() { var geolocation = BMap.Geolocation(); geolocation.getCurrentPosition(function (hasil) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //memperoleh Latitude var lngCurrent = result.point.lng; //memperoleh garis bujur jika (latCurrent && lngCurrent) { var skema = ''; // urlObject adalah objek parameter kueri bilah alamat saya var queryStr = '?origin=name:lokasi saya|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // skema ios = 'baidumap://map/direction' + queryStr } else { // skema android = 'bdapp://map/direction ' + queryStr; } // Kode implementasi utama window.location.href = skema; ​​var startTime = Date.now(); endTime = 0; var t = setInterval(function () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { clearInterval(t); } if (count < 30) kembali; jika (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; }) ;

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait