Ejemplo de implementación para activar la aplicación Baidu y Amap en Html5

Hace unos días, United Black Card informó la necesidad de abrir la aplicación Baidu o la aplicación Amap en H5, así que verifiqué los documentos relevantes en línea y puse los enlaces a continuación: 1. Amap 2. Baidu Map

La idea específica es que al hacer clic para seleccionar un mapa, primero solicite el enlace de la APLICACIÓN. Si no hay respuesta después de 800 milisegundos, salte al enlace H5. La desventaja de este método es que saltará al enlace H5 independientemente de si salta a la APLICACIÓN o no. Si tienes alguna buena idea, por favor comenta.

A continuación se muestra el código relevante:

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // Ir a la APLICACIÓN primero const ifr = document.createElement('iframe'); ifr.src = AppUrl.style.display = 'none'; . cuerpo.appendChild(ifr); setTimeout(function(){ documento.body.removeChild(ifr); }, 3000); // Llama al enlace H5 después de 800 milisegundos let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer }); ){ // Coloque enlaces H5 relevantes aquí if (mapType === 'baidu') { frameDom.attr('src', http://api.map.baidu.com/direction?origin=latlng:+ curLat +,+ curLng +|nombre:+ currAddr +&destination=latlng:+ elat +,+ elng +|nombre:+ eaddr +&region= + nombre de la ciudad +&mode=conducción&output=html&src=com.youbei.chefu } else if (mapType === 'amap') { frameDom.attr('src', https://ditu.amap.com/dir?type=car&from[lnglat]=+ curLng +,+ curLat +&from[name]=+currAddr+&to[lnglat]=+ elng + ,+ elat +&to[nombre]=+eaddr+&src=com.youbei.chefu); const isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //terminal ios

1. Gaodé

 // Los encabezados de Apple y Android son diferentes let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; const AppUrl = proto + ?t= 0&slat=+curLat+&slon=+curLng+ &sname= +currAddr+&dlat=+elat+&dlon=+elng+&dname=+eaddr+&src=xxx; ToggleAppAndH5(AppUrl,Devolución de llamada)

2. Baidu

 // Los encabezados de Apple y Android son diferentes let proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto + map/direction?region=+cityName+&origin=latlng:+ curLat+,+ curLng + |nombre:+ currAddr +&destination=latlng:+ elat +,+ elng +|nombre:+ eaddr +&coord_type=bd09ll&mode=driving&src=com.youbei.chefu; ToggleAppAndH5(AppUrl, devolución de llamada)

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.