コントロール
- ##1 マップ コントロールの概要
- 2 マップにコントロールを追加 ##3
- コントロール コントロールの場所 4
- コントロール構成の変更##5
- カスタム コントロール
マップ コントロールの概要
地図との対話を担当する Baidu Map 上の UI 要素は、コントロールと呼ばれます。 Baidu Map API は豊富なコントロールを提供しており、Control クラスを通じてカスタム コントロールを実装することもできます。
マップ API で提供されるコントロールは次のとおりです:
コントロール: コントロールの 抽象基本クラス すべてのコントロールはメソッドとプロパティを継承します。このクラスの。このクラスを使用すると、カスタム コントロールを実装できます。
NavigationControl: MapPan and Zoom Control、PC 側では、デフォルトでマップの左上隅に配置されます。地図のパンとズームを制御します。モバイル バージョンでは、デフォルトでマップの右下に位置するズーム コントロールが提供されます。
OverviewMapControl: サムネイル マップ コントロールは、デフォルトでマップの右下にあり、折りたたみ可能なサムネイル マップです。
ScaleControl: Scale コントロール は、デフォルトでマップの左下にあり、マップの縮尺関係を表示します。
MapTypeControl: マップ タイプ コントロール。デフォルトではマップの右上隅にあります。
CopyrightControl: コピーライト コントロール。デフォルトではマップの左下にあります。
GeolocationControl: ロケーション コントロール。モバイル端末用に開発され、デフォルトでマップの左下に位置します。
マップにコントロールを追加する
Map.addControl() メソッドを使用して、マップにコントロールを追加できます。この前にマップを初期化する必要があります。たとえば、標準のマップ コントロールをマップに追加するには、コードに次のコードを追加します。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());複数のコントロールをマップに追加できます。この例では、パンとズーム コントロール、スケール コントロール、およびサムネイル コントロールをマップに追加します。コントロールがマップに追加されると、すぐに有効になります。
うわーコントロールの位置を制御する
コントロールを初期化するときに、アンカー プロパティとオフセット プロパティが共同してマップ上のコントロールの位置を制御するオプションのパラメーターを指定できます。 。
ドッキング位置の制御 アンカーは、コントロールのドッキング位置、つまりコントロールがマップのどの隅にドッキングされているかを表します。マップ サイズが変更されると、コントロールはドッキング位置に応じてその位置を調整します。アンカーに許可される値は次のとおりです。
BMAP_ANCHOR_TOP_LEFT は、コントロールがマップの左上隅に配置されることを示します。
BMAP_ANCHOR_TOP_RIGHT は、コントロールがマップの右上隅に配置されていることを示します。
BMAP_ANCHOR_BOTTOM_LEFT は、コントロールがマップの左下隅に配置されていることを示します。
BMAP_ANCHOR_BOTTOM_RIGHT は、コントロールがマップの右下隅に配置されていることを示します。
制御位置オフセットドッキング位置の指定に加えて、オフセットを使用してドッキング位置を示すこともできます。制御距離 地図の境界線にあるピクセル数。 2 つのコントロールのドッキング位置が同じ場合、コントロールが重なって表示される場合がありますが、この場合、オフセット値を使用して 2 つのコントロールを別々に表示できます。
この例では、スケール バーをマップの左下隅に配置します。API にはデフォルトで著作権情報が含まれるため、コントロールが重ならないようにオフセット値を追加する必要があります。
map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用コントロール構成の変更
マップ API コントロールには豊富な構成パラメーターが用意されています。要件を満たすコントロールの外観を取得するためにそれらを変更するには、API ドキュメントを参照してください。たとえば、NavigationControl コントロールには次のタイプが用意されています。
BMAP_NAVIGATION_CONTROL_LARGE は、完全なパンおよびズーム コントロールが表示されることを示します。
BMAP_NAVIGATION_CONTROL_SMALL は、小さなパンとズームのコントロールを表示することを意味します。
BMAP_NAVIGATION_CONTROL_PAN は、コントロールのパン機能のみが表示されることを意味します。
BMAP_NAVIGATION_CONTROL_ZOOM は、コントロールのズーム部分のみが表示されることを意味します。
次の図は、上記のさまざまなタイプのコントロールの外観を左から右に示しています。
上の図の最初の 4 つはパンとPC 側のズーム コントロール スタイル 最後はモバイルのズーム コントロール スタイルです。
次の例では、パンおよびズーム マップ コントロールの外観を調整します。
うわーカスタム コントロール
Baidu Map API を使用すると、Control を継承してカスタム マップ コントロールを作成できます。
使用可能なカスタム コントロールを作成するには、次の手順を実行する必要があります:
1. カスタム コントロールのコンストラクターを定義します。 2. カスタム コントロール コンストラクターのプロトタイプ属性を Control のインスタンスに設定して、コントロールの基本クラスを継承できるようにします。 3.initialize()メソッドを実装し、defaultAnchorプロパティとdefaultOffsetプロパティを提供します。
コンストラクターを定義して Control を継承する
まず、カスタム コントロールのコンストラクターを定義し、コンストラクターに 2 つのプロパティ (defaultAnchor とdefaultOffset) を指定する必要があります。 API コントロールを正しく配置し、コントロールから継承させます。次の例では、ZoomControl という名前のコントロールを定義します。これは、クリックされるたびにマップを 2 レベルずつズームインします。パンとズームのコントロールで使用されるグラフィック アイコンの代わりに、テキスト ロゴが表示されます。
var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts));カスタム コントロールの初期化
map.addControl() メソッドを呼び出してカスタム コントロールを追加すると、 API オブジェクトの initialize() メソッドが呼び出され、コントロールが初期化されます。このメソッドを実装し、その中にコントロールに必要な DOM 要素を作成し、DOM イベントを追加する必要があります。カスタム コントロール内のすべての DOM 要素は、最終的にマップ コンテナー (つまり、マップが配置されている DOM 要素) に追加される必要があります。マップ コンテナーは、map.getContainer() メソッドを通じて取得できます。最後に、initialize() メソッドはコントロール コンテナの DOM 要素を返す必要があります。
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts));カスタム コントロールの追加
カスタム コントロールを追加する方法は、他のコントロールを追加する場合と同じです。 map.addControl() メソッドを呼び出すだけで十分です。
// 定义一个控件类，即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); } // 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control();// マップに追加 map.addControl(myZoomCtrl);
