ตัวอย่างการใช้งานการปลุก Baidu และ Amap APP ใน Html5

เมื่อไม่กี่วันที่ผ่านมา United Black Card รายงานว่าจำเป็นต้องเปิดแอป Baidu หรือ Amap APP ใน H5 ดังนั้นฉันจึงตรวจสอบเอกสารที่เกี่ยวข้องทางออนไลน์และใส่ลิงก์ด้านล่าง: 1. Amap 2. Baidu Map

แนวคิดเฉพาะคือเมื่อคลิกเพื่อเลือกแผนที่ ก่อนอื่นให้ขอลิงก์ APP หากไม่มีการตอบสนองหลังจาก 800 มิลลิวินาที ให้ข้ามไปที่ลิงก์ H5 ข้อเสียของวิธีนี้คือมันจะข้ามไปที่ลิงก์ H5 ไม่ว่าจะข้ามไปที่ APP หรือไม่ก็ตาม หากคุณมีความคิดที่ดีใด ๆ โปรดแสดงความคิดเห็น

ด้านล่างเป็นรหัสที่เกี่ยวข้อง:

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // ไปที่ APP ก่อน const ifr = document.createElement('iframe'); ifr.src = AppUrl; ifr.style.display = 'none'; .body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // โทรลิงค์ H5 หลังจาก 800 มิลลิวินาที ให้ timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer); }; ){ // ใส่ลิงก์ H5 ที่เกี่ยวข้องที่นี่ ถ้า (mapType === 'baidu') { frameDom.attr('src', http://api.map.baidu.com/direction?origin=latlng:+ curLat +,+ curLng +|ชื่อ:+ currAddr +&destination=latlng:+ elat +,+ elng +|ชื่อ:+ eaddr +&region= + ชื่อเมือง +&mode=driving&output=html&src=com.youbei.chefu); } อื่น ๆ ถ้า (mapType === 'amap') { frameDom.attr('src', https://ditu.amap.com/dir?type=car&from[lnglat]=+ curLng +,+ curLat +&from[ชื่อ]=+currAddr+&to[lnglat]=+ elng + ,+ ดี +&to[ชื่อ]=+eaddr+&src=com.youbei.chefu); const isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); // เทอร์มินัล ios

1. เกาเต๋อ

 // ส่วนหัวของ Apple และ Android แตกต่างกัน ให้ proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; +currAddr+&dlat=+elat+&dlon=+elng+&dname=+eaddr+&src=xxx; ToggleAppAndH5(AppUrl,โทรกลับ)

2. ไป่ตู้

 // ส่วนหัวของ Apple และ Android แตกต่างกัน ให้ proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto + map/direction?region=+cityName+&origin=latlng:+ curLat+,+ curLng + |ชื่อ:+ currAddr +&destination=latlng:+ elat +,+ elng +|ชื่อ:+ eaddr +&coord_type=bd09ll&mode=driving&src=com.youbei.chefu;

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