Как вызвать приложение Baidu Map в Html5

Недавно я взял на себя требование, которое требует гибридной разработки. После того, как интерфейс будет выполнен с помощью h5, страницу можно будет встроить в iOS и Android, и необходимо будет использовать навигацию по карте. Конкретные функциональные точки заключаются в следующем:

Если 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 = Schema; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / Когда после успешного запуска приложения Baidu Map вернитесь на страницу h5. В это время endTime - startTime должно быть больше, чем timeout + 200; если активация не удалась, откройте веб-страницу навигации по карте Baidu, если (!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'; } }, 20);

Полный код:

 function WakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //полученная широта var lngCurrent = result.point.lng; //полученная долгота if (latCurrent && lngCurrent) { var Schema = ''; // 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(); var count = 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'; } }, 20); window.onblur = function () {clearInterval(t }); else { alert('Невозможно определить местоположение, проверьте настройки позиционирования мобильного телефона'); }) };

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.