How H5 evokes Baidu map App

1. If Baidu map is installed in IOS (Android), click the navigation button to call up Baidu map app
2. Otherwise, open Baidu map navigation on the web

The api documents of Baidu map to be used are as follows:
http://lbsyun.baidu.com/index...

First code:

// Try to evoke Baidu map app window.location.href = scheme; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); // After successfully invoking Baidu map app, return to h5 page, then endTime - startTime must be greater than timeout + 200; if failed, open Baidu map navigation on web if (!startTime || (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; } }, timeout);

Question:
There is no problem in running the above code on android machine, but setTimeout timer is always executed on ios, so if the app is in the background on ios side, its h5 code will still execute.

So we need to change the way. The general idea is:

1. Polling
2. Try to call up Baidu map app within 600 ms. after the call fails, judge whether h5 is in the foreground or the background. If it is in the foreground, open the web-based Baidu map app. After 200 ms, the timer will be cleared no matter whether the call succeeds or fails.

Modified code:

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);

Complete code:

function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //Latitude obtained var lngCurrent = result.point.lng; //Longitude obtained if (latCurrent && lngCurrent) { var scheme = ''; // urlObject is my address bar query parameter object 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 terminal scheme = 'baidumap://map/direction' + queryStr; } else { // android terminal scheme = 'bdapp://map/direction' + queryStr; } // Main implementation code window.location.href = scheme; 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); window.onblur = function () { clearInterval(t); }; } else { alert('Unable to get the location, please check the location settings of the mobile phone'); } } }); }

2 December 2019, 23:33 | Views: 8481