كيفية استدعاء تطبيق Baidu Map في Html5

لقد توليت مؤخرًا مطلبًا يتطلب تطويرًا مختلطًا بعد الانتهاء من الواجهة الأمامية باستخدام h5، ويمكن تضمين الصفحة في نظامي التشغيل iOS وAndroid، ويتطلب ذلك استخدام التنقل عبر الخرائط في خرائط Baidu. نقاط الوظيفة المحددة هي كما يلي:

إذا تم تثبيت Baidu Map على الهاتف المحمول (iOS، android)، فانقر فوق زر التنقل لاستدعاء تطبيق Baidu Map

بخلاف ذلك، افتح تطبيق Baidu Map Navigation على جانب الويب

رابط مستند API لخريطة Baidu الذي يجب استخدامه هو كما يلي: http://lbsyun.baidu.com/index.php?title=uri/api/ios

الكود الأول:

 // حاول استدعاء تطبيق Baidu Map window.location.href = مخطط var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / بعد تنشيط تطبيق Baidu Map بنجاح، ارجع إلى صفحة h5 في هذا الوقت، يجب أن يكون endTime - startTime أكبر من المهلة + 200 إذا فشل التنشيط، فافتح Baidu Map Navigation إذا (!startTime ||.(endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } }, timeout) ;

سؤال:

لا توجد مشكلة في تشغيل الكود أعلاه على جهاز 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 () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { ClearInterval(t); } if (count < 30) return if (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';

الكود الكامل:

 function WakeBaidu() { var Geolocation = new BMap.Geolocation(); Geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; // الحصول على Latitude var lngCurrent = result.point.lng; // تم الحصول على خط الطول if (latCurrent && lngCurrent) { var مخطط = ''; // 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 مخطط = 'baidumap://map/direction' + queryStr } else { // android مخطط = 'bdapp://map/direction ' + queryStr; } // كود التنفيذ الرئيسي window.location.href = مخطط var startTime = Date.now(); endTime = 0؛ var t = setInterval(function () { count += 1; endTime = Date.now() - startTime; if (endTime > 800) { ClearInterval(t); } if (count < 30) return; if (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; } }, 20); window.onblur = function () { ClearInterval(t } } else { تنبيه ("غير قادر على تحديد المواقع، يرجى التحقق من إعدادات تحديد المواقع بالهاتف المحمول")؛ }) }

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.