Html5 で百度地図アプリを呼び出す方法

最近、ハイブリッド開発を必要とする要件を引き継ぎました。これは、フロントエンドが h5 で完了した後、ページを ios に埋め込み、Baidu Map の地図ナビゲーションを使用する必要があります。具体的な機能ポイントは次のとおりです。

Baidu Map が携帯電話 (iOS、Android) にインストールされている場合は、ナビゲーション ボタンをクリックして Baidu Map アプリを呼び出します

それ以外の場合は、Web 側の Baidu マップ ナビゲーションを開きます

使用する必要があるBaidu MapのAPIドキュメントリンクは次のとおりです: http://lbsyun.baidu.com/index.php?title=uri/api/ios

最初のコード:

 // 百度地図アプリを呼び出してみる window.location.href = var timeout = 600; var t = setTimeout(function () { var endTime = Date.now(); / / 百度地図アプリの起動に成功した後、h5 ページに戻ります。この時点で、起動が失敗した場合は、endTime - startTime がタイムアウト + 200 より大きい必要があります。 || (endTime - startTime) < (タイムアウト + 200)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html' } }, タイムアウト) ;

質問：

Android マシン上で上記のコードを実行する場合は問題ありませんが、setTimeout タイマーは iOS 上で常に実行されるため、iOS 側の場合、アプリがバックグラウンドにある場合でも、その h5 コードが実行されます。

したがって、一般的な考え方は次のとおりです。

1. ポーリング方式を使用する
2. 600 ミリ秒以内に Baidu Map アプリを起動してみてください。起動が失敗したら、h5 がフォアグラウンドにあるかバックグラウンドにあるかを判断します。フォアグラウンドにある場合は、Web 側の Baidu Map アプリを開きます。覚醒が成功したか失敗したかに関係なく、タイマーは 200 ミリ秒後にクリアされます。

変更されたコード:

 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; (!(document.hidden || document.webkitHidden)) { window.location.href = 'http://api.map.baidu.com/direction' + queryStr + ' } }, 20);

完全なコード:

 function wakeBaidu() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (result) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var latCurrent = result.point.lat; //取得した緯度変数lngCurrent = result.point.lng; //経度を取得 if (latCurrent && lngCurrent) { var skill = ''; // 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 = 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 をご支援いただければ幸いです。