Html5에서 Baidu 지도 앱을 호출하는 방법

최근에 하이브리드 개발이 필요한 요구 사항을 인수했습니다. h5로 프런트 엔드가 완료된 후 페이지를 ios 및 android에 삽입할 수 있도록 Baidu Map의 지도 탐색을 사용해야 합니다. 구체적인 기능 점수는 다음과 같습니다.

휴대폰(ios, android)에 바이두맵이 설치되어 있는 경우, 네비게이션 버튼을 클릭하면 바이두맵 앱이 실행됩니다.

그렇지 않으면 웹사이드 Baidu 지도 내비게이션을 엽니다.

사용해야 하는 바이두맵의 API 문서 링크는 다음과 같습니다: http://lbsyun.baidu.com/index.php?title=uri/api/ios

첫 번째 코드:

 // Baidu 지도 앱 호출 시도 window.location.href =cheme; var timeout = 600; var startTime = Date.now(); var t = setTimeout(function () { var endTime = Date.now(); / Baidu 지도 앱을 성공적으로 활성화한 후 h5 페이지로 돌아갑니다. 이때 endTime - startTime은 활성화에 실패할 경우 web-side Baidu 지도 탐색을 엽니다. || (endTime - startTime) < (timeout + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } }, timeout) ;

질문:

위의 코드가 Android 기기에서 실행되는 데에는 문제가 없지만 iOS에서는 setTimeout 타이머가 항상 실행되므로 iOS 측에서는 앱이 백그라운드에 있더라도 h5 코드가 계속 실행됩니다.

따라서 일반적인 아이디어는 다음과 같습니다.

1. 폴링 방법 사용
2. 600ms 이내에 Baidu 지도 앱을 활성화해 보세요. 각성 실패 후 h5가 포그라운드에 있는지, 아니면 포그라운드에 있는지 확인하세요. 각성 성공 여부에 관계없이 타이머는 200ms 후에 지워집니다.

수정된 코드:

 var startTime = Date.now(); var count = 0; var 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);

전체 코드:

 function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //위도 획득 var lngCurrent = result.point.lng; //경도 획득 if (latCurrent && lngCurrent) { varchem = ''; // urlObject는 내 주소 표시줄 쿼리 매개변수 개체입니다. var queryStr = '?origin=name:my location|latlng:' + latCurrent + ',' + lngCurrent + '&destination=' + urlObject. lat + ',' + urlObject.lng + '&region=' + urlObject.city + '&coord_type=bd09ll&mode=driving'; if (isIOS()) { // ios 방식 = 'baidumap://map/direction' + queryStr } else { // android 방식 = 'bdapp://map/direction' + queryStr; } // 주요 구현 코드 window.location.href =chem; 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('휴대폰 위치 설정을 확인하세요.'); }) }

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.