HTML5 位置情報は現在位置を取得し、Baidu に表示します。map_html5 チュートリアル スキル

モバイル Web や Web アプリを開発する場合、Baidu Map API を使用する場合、携帯電話の測位によって現在位置を取得し、地図上の中央に表示する必要があることがよくあります。これには、HTML5 の地理位置情報機能を使用する必要があります。

コードをコピー

コードは次のとおりです:

navigator.geolocation.getCurrentPosition( callback);

座標の取得に成功すると、コールバック メソッドのパラメータが取得された座標点で実行され、マップを初期化し、コントロールを設定します。ポイント、ズーム レベルを変更し、マップにポイントを追加します。 オーバーレイ:

コードをコピー

コードは次のとおりです:

var map = new BMap.Map("mapDiv");//mapDiv はマップが配置される div の ID
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl()); //point は座標点です。 15 はマップのズーム レベルで、最大レベルは 18 です。
var pointMarker = new BMap);


;これでは十分ではなく、表示される結果は正確ではありません。これは、getCurrentPosition によって取得される座標が GPS の経度と緯度の座標であり、Baidu Map の座標が特別に変換されるためです。そのため、取得の間に座標変換の手順が必要です。この変換方法は Baidu API で提供されており、ポイント変換またはバッチ変換の両方が提供されています。シングルポイント変換については http://developer.baidu.com/ を参照する必要があります。 map/jsdemo/demo/convertor.js、バッチ変換は http://developer.baidu.com/map/jsdemo/demo/changeMore .js を参照する必要があります。ここでは前者のみが必要です:

コードをコピーしますコードは次のとおりです:

BMap.Convertor.translate(gpsPoint, 0, callback) ;

//gpsPoint: 変換前の座標、2 番目のパラメータは変換方法、0 は GPS 座標が Baidu 座標に変換されることを意味し、コールバック関数、パラメータは新しい座標です


をクリックしますこの例の詳細なコードは次のとおりです。 (リファレンス内の ak はアプリケーション キーです)

コードをコピーコードは次のとおりです:

"viewport" content="initial-scale=1.0, user-scalable=no" />

• AlloyTouch 全画面スクロール プラグインは 30 秒で滑らかな H5 ページを作成します
• HTML5の実戦とタッチイベント解析（touchstart、touchmove、touchend）
• HTML5 Canvas 9での画像描画例を詳しく解説
• 正規表現と新しい HTML5 要素
• NodeJS と HTML5 を組み合わせて複数のファイルをドラッグ アンド ドロップしてサーバーにアップロードする方法