How H5 evokes Baidu map App

Recently, I took over a demand for hybrid development. After h5, the front-end embedded the page into ios and android, and the map navigation of Baidu map was needed. The specific function points are as follows:

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

Tags: Javascript iOS Android Mobile

Posted on Mon, 02 Dec 2019 23:33:59 -0500 by stuartshields