Página Inicial>Tutorial de web design>Tutorial HTML

Como invocar o aplicativo Baidu Map em HTML5

Autor：Eve Cole Data da Última Atualização：2025-01-18 08:00:02

Recentemente, assumi um requisito, que requer desenvolvimento híbrido. Depois que o front-end é feito com h5, a página pode ser incorporada no iOS e na navegação do mapa do Baidu. Os pontos de função específicos são os seguintes:

Se o Baidu Map estiver instalado no celular (ios, android), clique no botão de navegação para invocar o aplicativo Baidu Map

Caso contrário, abra o site Baidu Map Navigation

O link do documento API do Baidu Map que precisa ser usado é o seguinte: http://lbsyun.baidu.com/index.php?title=uri/api/ios

Primeiro código: 

 // Tente invocar o aplicativo Baidu Map window.location.href = esquema var timeout = 600; / Quando, após ativar com êxito o aplicativo Baidu Map, retorne à página h5. Neste momento, endTime - startTime deve ser maior que timeout + 200; se a ativação falhar, abra o Baidu Map Navigation if (!startTime). || (endTime - startTime) < (tempo limite + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html'; ;

pergunta:

Não há problema com o código acima rodando na máquina Android, mas o timer setTimeout é sempre executado no iOS, então se estiver no lado do iOS, mesmo que o aplicativo esteja em segundo plano, seu código h5 ainda será executado.

Portanto, precisamos mudar o caminho. A ideia geral é:

  1. Usando o método de votação
  2. Tente ativar o aplicativo Baidu Map dentro de 600 ms. Depois que a ativação falhar, determine se h5 está em primeiro plano ou em segundo plano, abra o aplicativo Baidu Map no lado da web. Independentemente de a ativação ter sido bem-sucedida ou falhar, o temporizador é zerado após 200 ms.

Código modificado: 

 var startTime = Date.now(); var endTime = 0; if (endTime > 800) { clearInterval(t); } if (contagem <30) return if (!(document.hidden || document.webkitHidden)) { window.location.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; //latitude obtida var lngCurrent = result.point.lng; //longitude obtida if (latCurrent && lngCurrent) { var esquema = ''; urlObject é meu objeto de parâmetro de consulta da barra de endereço var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // esquema ios = 'baidumap://map/direction' + queryStr } else { // esquema android = 'bdapp://map/direction ' + queryStr; } // Código de implementação principal window.location.href = esquema; 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'; }) ;

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.

Artigos Relacionados