Cómo invocar la aplicación Baidu Map en Html5

Recientemente, asumí un requisito que requiere desarrollo híbrido. Una vez que la interfaz está terminada con h5, la página se puede incrustar en ios y se debe usar la navegación de mapas de Baidu Map. Los puntos de función específicos son los siguientes:

Si Baidu Map está instalado en el teléfono móvil (ios, android), haga clic en el botón de navegación para invocar la aplicación Baidu Map.

De lo contrario, abra Baidu Map Navigation en el lado web.

El enlace del documento API de Baidu Map que debe usarse es el siguiente: http://lbsyun.baidu.com/index.php?title=uri/api/ios

Primer código:

 // Intenta invocar la aplicación Baidu Map window.location.href = esquema; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / / Cuando después de activar con éxito la aplicación Baidu Map, regrese a la página h5. En este momento, endTime: startTime debe ser mayor que el tiempo de espera + 200, si la activación falla, abra Baidu Map Navigation en el lado web si (!startTime; || (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; ;

pregunta:

No hay ningún problema con el código anterior que se ejecuta en la máquina Android, pero el temporizador setTimeout siempre se ejecuta en iOS, por lo que si está en el lado de iOS, incluso si la aplicación está en segundo plano, su código h5 aún se ejecutará.

Entonces necesitamos cambiar la forma.

1. Usando el método de encuesta
2. Intente activar la aplicación Baidu Map dentro de los 600 ms. Después de que falle la activación, determine si h5 está en primer plano o en segundo plano. Si está en primer plano, abra la aplicación Baidu Map del lado web. Independientemente de si la excitación es exitosa o fallida, el temporizador se borra después de 200 ms.

Código modificado:

 var HoraInicio = Fecha.ahora(); var cuenta = 0; var HoraFin = 0; var t = setInterval(función () { cuenta += 1; HoraFin = Fecha.ahora() - HoraInicio; si (HoraFinal > 800) { clearInterval(t); } if (cuenta < 30) return if (!(document.hidden || document.webkitHidden)) { ventana.ubicación.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';

Código completo:

 function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (resultado) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //obtenido Latitude var lngCurrent = result.point.lng; //longitud obtenida si (latCurrent && lngCurrent) { var esquema = ''; // urlObject es mi objeto de parámetro de consulta de la barra de direcciones var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.ciudad + '&coord_type=bd09ll&mode=conducir'; if (isIOS()) { // esquema ios = 'baidumap://map/direction' + queryStr } else { // esquema android = 'bdapp://map/direction ' + queryStr; } // Código de implementación principal window.location.href = esquema; 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 { alert('No se puede obtener el posicionamiento, verifique la configuración de posicionamiento del teléfono móvil'); }); }

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.