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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

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" />