How to invoke Baidu Map App in Html5

Recently, I took over a requirement, which requires hybrid development. After the front-end is done with h5, the page can be embedded into ios and android. Baidu Map's map navigation needs to be used. The specific function points are as follows:

If Baidu Map is installed on the mobile phone (ios, android), click the navigation button to invoke the Baidu Map app

Otherwise, open the web-side Baidu Map Navigation

The API document link of Baidu Map that needs to be used is as follows: http://lbsyun.baidu.com/index.php?title=uri/api/ios

First code:

 // Try to invoke the Baidu Map app window.location.href = scheme; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); // When After successfully arousing the Baidu Map app, return to the h5 page. At this time, endTime - startTime must be greater than timeout + 200; if the arousal fails, open the web-side Baidu Map Navigation if (!startTime || (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; } }, timeout) ;

question:

There is no problem with the above code running on the Android machine, but the setTimeout timer is always executed on iOS, so if it is on the iOS side, even if the app is in the background, its h5 code will still be executed.

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

1. Using polling method
2. Try to arouse the Baidu Map app within 600 ms. After the arousal fails, determine whether h5 is in the foreground or the background. If it is in the foreground, open the web-side Baidu Map app. Regardless of whether the arousal is successful or failed, the timer is cleared after 200 ms.

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; //obtained Latitude var lngCurrent = result.point.lng; //obtained longitude 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 scheme = 'baidumap://map/direction' + queryStr; } else { // android 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 obtain positioning, please check the mobile phone positioning settings'); } } }) ; }

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.