Baidu マップ api_javascript スキルの使用方法

Baidu Map API を使用したい場合は、まず Baidu Map API キーを取得してから、Baidu Map API を導入する必要があります。次に、API キーの取得と導入のテクニックを詳しく紹介します。コードを提供してください。Baidu Maps API の使用方法の詳細な説明については、以下を参照してください。

まず、Baidu Maps API を呼び出す場合は、Baidu Maps API キーを取得する必要があります。

キーの申請は非常に簡単です。Baidu Maps API のホームページに関連リンクがあり、関連情報を入力すると、Baidu がキーを提供します。

次のステップは、Baidu Maps API を導入することです

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

2.map.centerAndZoom の 2 番目のパラメータは地図のズーム レベルで、最大値は 19、最小値は 0 です。 (でも実際は3つに減ると…)

3. BMap.Map メソッドにはマップを作成するときにコンテナーが必要です (マップはコンテナーのサイズに応じて自動的に調整されます)。関連するコンテナーの ID を入力します。

通過可能

設定することもできます

Baidu Map は、私たちが使用できる非常に豊富な機能スペースを提供します。

1.Control: コントロールの抽象基本クラス。すべてのコントロールはこのクラスのメソッドとプロパティを継承します。このクラスを使用すると、カスタム コントロールを実装できます。

2.NavigationControl: 地図のパンとズームのコントロール。PC ではデフォルトで地図の左上隅にあり、地図のパンとズームを制御する機能が含まれています。モバイル バージョンでは、デフォルトでマップの右下に位置するズーム コントロールが提供されます。

3.OverviewMapControl: デフォルトでマップの右下に位置するサムネイル マップ コントロールは、折りたたみ可能なサムネイル マップです。

4.ScaleControl: デフォルトでマップの左下に位置するスケール コントロールは、マップの縮尺関係を表示します。

5.MapTypeControl: マップ タイプ コントロール。デフォルトでマップの右上隅にあります (マップ、衛星、3D)。

6.CopyrightControl: 著作権コントロール。デフォルトではマップの左下にあります。

7.GeolocationControl: モバイル端末向けに開発された位置制御。デフォルトでは地図の左下にあります。

レンダリング

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });