Baidu マップでの html5 の配置と表示の例_html5 チュートリアル スキル

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

コードをコピー

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

navigator.geolocation.getCurrentPosition(コールバック);

座標の取得に成功すると、コールバック関数のコールバックが実行されます。コールバック メソッドのパラメータは取得した座標点であり、マップを初期化し、コントロール、中心点、ズーム レベルを設定して、地図へのポイントオーバーレイ:

コードをコピー

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

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

しかし、実際にはこれだけでは不十分で、表示される結果は正確ではありません。これは、getCurrentPosition で取得した座標が GPS の経度と緯度の座標であり、Baidu Map の座標が特別に変換されているためです。位置座標の取得と初期化 マップ間での 1 ステップの座標変換が必要です。この変換メソッドは、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 はアプリケーション キーです)

コードをコピー

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

<script><br /> $(function( ){<br /> navigator .geolocation.getCurrentPosition(translatePoint); //Positioning<br /> });<br /> function translationPoint(position){<br /> var currentLat = Position.coords.latitude;<br /> var currentLon = Position.coords.longitude; <br /> var gpsPoint = new BMap.Point(currentLon, currentLat);<br /> BMap.Convertor.translate(gpsPoint, 0, initMap) // 座標を変換します<br /> }<br /> 関数initMap(point){<br /> //マップを初期化します<br /> map = new BMap.Map("map");<br /> map.addControl(new BMap.NavigationControl());<br /> map.addControl( new BMap.ScaleControl()) ;<br />map.addControl(new BMap.OverviewMapControl());<br />map.centerAndZoom(point, 15);<br />map.addOverlay(new BMap.Marker(point)) <br /> }<br /> </script>

< ;/html>

開発中、パソコンの測位速度が少し遅いと感じましたが、座標が取得できなかったり、地図が表示されなかったりすることがありましたので、携帯電話での測位を推奨します。もっと早く。

もちろん、モバイル Web ページのみを開発する場合は、jQuery を使用する必要はありません。フレームが大きすぎるため、他の軽量モバイル JS フレームワークを使用できます。