Exemple d'implémentation de réveil de Baidu et Amap APP en HTML5

Il y a quelques jours, United Black Card a signalé la nécessité d'ouvrir l'application Baidu ou l'application Amap dans H5, j'ai donc vérifié les documents pertinents en ligne et mis les liens ci-dessous : 1. Amap 2. Baidu Map

L'idée spécifique est que lorsque vous cliquez pour sélectionner une carte, demandez d'abord le lien APP. S'il n'y a pas de réponse après 800 millisecondes, passez ensuite au lien H5. L'inconvénient de cette approche est qu'elle passera au lien H5, qu'elle accède ou non à l'APP. Si vous avez de bonnes idées, veuillez commenter.

Ci-dessous le code correspondant :

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // Accédez d'abord à l'APP const ifr = document.createElement('iframe'); . body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // Appelez le lien H5 après 800 millisecondes let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer }; ){ // Mettez ici les liens H5 pertinents if (mapType === 'baidu') { frameDom.attr('src', http://api.map.baidu.com/direction?origin=latlng:+ curLat +,+ curLng +|name:+ currAddr +&destination=latlng:+ elat +,+ elng +|name:+ eaddr +&region= + cityName +&mode=driving&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[name]=+eaddr+&src=com.youbei.chefu); } } const u = navigator.userAgent; const isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //terminal ios

1. Gaodé

 // Les en-têtes Apple et Android sont différents 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, rappel)

2. Baidu

 // Les en-têtes Apple et Android sont différents let proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto + map/direction?region=+cityName+&origin=latlng:+ curLat+,+ curLng + |name:+ currAddr +&destination=latlng:+ elat +,+ elng +|name:+ eaddr +&coord_type=bd09ll&mode=driving&src=com.youbei.chefu; ToggleAppAndH5(AppUrl, rappel)

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.