コメント:この記事では、主にHTML5の位置決めの例を紹介し、Baiduマップに表示します。それを必要とする友達はそれを参照できます。
モバイルWebまたはWebAppsを開発する場合、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); //ポイントは座標ポイント、15はマップズームレベル、最大レベルは18です
var pointmarker = new bmap.marker(point);
Map.AddoverLay(PointMarker);
ただし、実際には、これで十分ではなく、表示された結果は正確ではありません。これは、GetCurrentPositionによって得られた座標がGPS緯度と経度座標であり、Baiduマップの座標が特別に変換されているためです。したがって、位置決め座標を取得することとマップの初期化との間に、座標変換のステップが必要です。この変換方法は、すでにBaidu APIで提供されています。ポイントまたはバッチの交換を変換する方法が提供されます。単一のポイント変換には参照が必要であり、バッチ変換には参照が必要です。ここでは、前者だけが必要です:
bmap.convertor.translate(gpspoint、0、callback);
// gpspoint:座標変換前の2番目のパラメーターは変換方法であり、0はGPS座標がbaidu座標に変換されることを意味します。コールバック関数、パラメーターは新しい座標ポイントです
例の詳細なコードは次のとおりです。(引用のAKが適用される重要なものです)
<!doctype html>
<html lang = "zh-cn">
<head>
<Meta content = "Inivery-scale = 1.0、user-scalable = no" />
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<style type = "text/css">
*{
高さ:100%; //高さを設定すると、それ以外の場合は表示されません
}
</style>
<Script src = "http://code.jquery.com/jquery-111.0.min.js"> </script>
<script type = "text/javascript" src = "http://api.map.baidu.com/api?v=2.0&ak=··········> </script>
<script type = "text/javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>
<スクリプト>
$(function(){
navigator.geolocation.getCurrentPosition(translatePoint); //ポジショニング
});
関数翻訳ポイント(位置){
var currentlat = position.coords.latitude;
var currentlon = position.coords.longitude;
var gpspoint = new bmap.point(currentlon、currentlat);
bmap.convertor.translate(gpspoint、0、initmap); //座標を変換します
}
関数initmap(point){
//マップを初期化します
map = new bmap.map( "map");
map.addcontrol(new bmap.navigationcontrol());
map.addcontrol(new bmap.scalecontrol());
map.addcontrol(new bmap.overviewmapcontrol());
map.centerandzoom(Point、15);
map.addoverlay(new bmap.marker(point))
}
</script>
</head>
<body>
<div> </div>
</body>
</html>
開発プロセス中、コンピューターの位置決め速度は少し遅いと感じています。しばしば座標を取得できないため、マップを表示できません。携帯電話を使用してテストすることをお勧めしますが、ポジショニングはより速いです。
もちろん、モバイルWebページのみを開発する場合は、jqueryを使用する必要はありません。フレームワークが大きすぎるため、他の軽量モバイルJSフレームワークに切り替えることができます。