วิธีเรียกใช้แอพ Baidu Map ใน Html5

เมื่อเร็วๆ นี้ ฉันรับช่วงต่อข้อกำหนดซึ่งต้องมีการพัฒนาแบบไฮบริด หลังจากส่วนหน้าเสร็จสิ้นด้วย h5 แล้ว หน้าเว็บก็สามารถฝังลงใน iOS และ Android ได้ โดยต้องใช้การนำทางแผนที่บน Baidu Maps จุดฟังก์ชันเฉพาะมีดังนี้:

หากติดตั้ง Baidu Map บนโทรศัพท์มือถือ (ios, android) ให้คลิกปุ่มนำทางเพื่อเรียกใช้แอป Baidu Map

มิฉะนั้น ให้เปิดการนำทางแผนที่ Baidu บนเว็บ

ลิงก์เอกสาร API ของ Baidu Map ที่จำเป็นต้องใช้มีดังนี้: http://lbsyun.baidu.com/index.php?title=uri/api/ios

รหัสแรก:

 // ลองเรียกใช้แอป Baidu Map window.location.href = Schema; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / เมื่อปลุกเร้าแอป Baidu Map สำเร็จแล้ว ให้กลับไปที่หน้า h5 ในเวลานี้ endTime - startTime จะต้องมากกว่าการหมดเวลา + 200 หากความเร้าอารมณ์ล้มเหลว ให้เปิดการนำทางแผนที่ Baidu บนเว็บหาก (!startTime ||. (endTime - startTime) < (หมดเวลา + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } }, หมดเวลา ;

คำถาม:

ไม่มีปัญหากับโค้ดด้านบนที่ทำงานบนเครื่อง Android แต่ตัวจับเวลา setTimeout จะดำเนินการบน iOS เสมอ ดังนั้นหากอยู่ในฝั่ง iOS แม้ว่าแอปจะอยู่ในพื้นหลังก็ตาม โค้ด h5 ของแอปจะยังคงถูกดำเนินการ

เราจึงต้องเปลี่ยนแนวทางใหม่คือ

1. โดยใช้วิธีการลงคะแนนเสียง
2. พยายามกระตุ้นแอป Baidu Map ภายใน 600 มิลลิวินาที หลังจากการปลุกเร้าล้มเหลว ให้ตรวจสอบว่า h5 อยู่เบื้องหน้าหรือเบื้องหลัง ให้เปิดแอป Baidu Map บนเว็บ ไม่ว่าการปลุกเร้าจะสำเร็จหรือล้มเหลว ตัวจับเวลาจะถูกล้างหลังจากผ่านไป 200 มิลลิวินาที

รหัสที่แก้ไข:

 var startTime = Date.now(); var count = 0; var endTime = 0; var t = setInterval(function () { นับ += 1; endTime = Date.now() - startTime; if (endTime > 800) { clearInterval(t); } if (นับ < 30) กลับ; if (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' }, 20);

รหัสที่สมบูรณ์:

 ฟังก์ชั่น wakeBaidu () { var geolocation = new BMap.Geolocation (); geolocation.getCurrentPosition (ฟังก์ชั่น (ผลลัพธ์) { if (this.getStatus () == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; // ได้รับ Latitude var lngCurrent = result.point.lng; // ได้รับลองจิจูดถ้า (latCurrent && lngCurrent) { var Scheme = ''; // urlObject คือวัตถุพารามิเตอร์การสืบค้นแถบที่อยู่ของฉัน var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // ios Schema = 'baidumap://map/direction' + queryStr; } else { // Android Scheme = 'bdapp://map/direction ' + queryStr; } // รหัสการใช้งานหลัก window.location.href = Schema; var startTime = Date.now(); var count = 0; endTime = 0; var t = setInterval(function () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { clearInterval(t); } if (นับ < 30) กลับ; ถ้า (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; } }, 20); window.onblur = function () { clearInterval(t); } } }) ;

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network