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 を導入することです

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

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

a98d6f2686f6fee82acf0ce19e7b1f0a2cacc6d41bbb37262a98f745aa00fbf0

次に、マップを作成して試してみましょう。 (JSコード)

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

var map = new BMap.Map("container") // マップインスタンスを作成します
var point = new BMap.Point(120.391655,36.067588) // 点座標を作成します
; map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("香港", 15);

ここで 3 つの点を説明する必要があります:
1.map.centerAndZoom メソッドは、地図を作成します。最初のパラメーターでは、以前に作成した点を中心として地図を作成することも、都市エリアの中国語名に基づいて地図を作成することもできます。 (スペルが正しければ、英語の都市名に基づいて作成できます)

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

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

マップサイズについて:

通過可能

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

map.setZoom();

メソッドはマップ サイズ レベルをアクティブに制御します。

設定することもできます

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

map.enableScrollWheelZoom(true);

マウス ホイールを使用してサイズを制御します。

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

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

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

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

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

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

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

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

レンダリング

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

map.addControl(new BMap.NavigationControl());//ズームとパンのコントロール

map.addControl(new BMap.ScaleControl()) //スケール
map.addControl(new BMap.OverviewMapControl());//サムネイル
map.addControl(new BMap.MapTypeControl()) //マップタイプ
map.setCurrentCity("青島");


注: MapTypeControl の切り替え機能は、都市情報が設定されている場合にのみ使用できます

マップイベント:
Baidu Map API のほとんどのオブジェクトには addEventListener メソッドが含まれており、これを通じてオブジェクト イベントをリッスンできます。
例:

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

map.addEventListener("クリック", function(){
alert("地図をクリックしました。"); });

イベントをリッスンする必要がなくなった場合は、イベント リスナーを削除できます。各 API オブジェクトは、イベント リスニング関数を削除するための RemoveEventListener を提供します。

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

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

地図の表紙:
オーバーレイ: オーバーレイの抽象基本クラス。すべてのオーバーレイはこのクラスのメソッドを継承します。

マーカー: マーカーは地図上の点を表し、マーク アイコンはカスタマイズできます。

ラベル: マップ上のテキスト ラベルを表します。ラベルのテキスト コンテンツをカスタマイズできます。

ポリライン: 地図上のポリラインを表します。

ポリゴン: マップ上のポリゴンを表します。ポリゴンは閉じたポリラインに似ていますが、塗りつぶしの色を追加することもできます。

Circle: 地図上の円を表します。

情報ウィンドウ: 情報ウィンドウは、よりリッチなテキストやマルチメディア情報を表示できる特別なオーバーレイでもあります。注: マップ上で同時に開くことができる情報ウィンドウは 1 つだけです。

注釈の例:

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); 
 });

上記の説明がこの記事の全内容です。Baidu Map API を使用するすべての人に役立つことを願っています。