Exemplo de implementação de ativação do Baidu e Amap APP em Html5

Há alguns dias, o United Black Card relatou a necessidade de abrir o Baidu APP ou Amap APP no H5, então verifiquei os documentos relevantes online e coloquei os links abaixo: 1. Amap 2. Mapa Baidu

A ideia específica é que ao clicar para selecionar um mapa, primeiro solicite o link do APP. Se não houver resposta após 800 milissegundos, pule para o link H5. A desvantagem dessa abordagem é que ela saltará para o link H5 independentemente de saltar para o APP ou não. Se você tiver alguma boa ideia, por favor, comente.

Abaixo está o código relevante:

 function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // Vá primeiro para o APP const ifr = document.createElement('iframe'); .body.appendChild(ifr); setTimeout(function(){document.body.removeChild(ifr); }, 3000); // Chama o link H5 após 800 milissegundos let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); ){ // Coloque links H5 relevantes aqui if (mapType === 'baidu') { frameDom.attr('src', http://api.map.baidu.com/direction?origin=latlng:+ curLat +,+ curLng +|nome:+ currAddr +&destination=latlng:+ elat +,+ elng +|nome:+ eaddr +&region= + cityName +&mode=condução&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[nome]=+currAddr+&to[lnglat]=+ elng + ,+ elat +&to[nome]=+eaddr+&src=com.youbei.chefu); const isiOS = !!u.match(//(i[^;]+;( U;)? CPU.+Mac OS X/); //terminal ios

1. Gaode

 // Os cabeçalhos Apple e Android são diferentes let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; +currAddr+&dlat=+elat+&dlon=+elng+&dname=+eaddr+&src=xxx; ToggleAppAndH5(AppUrl,retorno de chamada)

2.Baidu

 // Os cabeçalhos Apple e Android são diferentes let proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto + map/direction?region=+cityName+&origin=latlng:+ curLat+,+ curLng + |nome:+ currAddr +&destino=latlng:+ elat +,+ elng +|nome:+ eaddr +&coord_type=bd09ll&mode=driving&src=com.youbei.chefu; ToggleAppAndH5(AppUrl, retorno de chamada)

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.