道具

マップ ツールの概要

ヒント: このツールはオープン ソース ライブラリ (lib) として作成されており、無料で外部に公開されています。JavaScript に直接アクセスできます。オープンソースライブラリ。以下のサンプルコードを実行する場合は、開発プロジェクトにlibファイルが導入されていることを確認してください｡具体的な参照方法については、JavaScriptオープンソースライブラリが提供するサンプルソースファイルを参照してください。オープンソース ライブラリは、Baidu Map JS API と一緒に使用する必要があることに注意してください。

Baidu Map は、次のような、より複雑な対話型機能を備えた「ツール」を提供します。

MarkerTool: マーキング ツール。このツールを通じて、ユーザーはマップの任意の領域にラベルを追加できます。

MarkerClusterer: マルチアノテーション アグリゲータ。このツールは、大量のポイント フィーチャをマップに読み込むと速度が遅くなったり上書きされたりする問題を解決します。

MarkerManager: 注釈管理ツール。このツールは、すべての注釈を表示、非表示、およびクリアする機能を提供します。

RichMarker: 豊富な注釈ツール。このツールは、カスタマイズされたマーカー スタイルをユーザーに提供し、クリック、ダブルクリック、ドラッグ アンド ドロップ イベントを追加します。

DistanceTool: 距離測定ツール。このツールを使用すると、ユーザーは地図上の任意の場所間の距離を測定できます。

RectangleZoom: 領域ズーム ツール。このツールは、ユーザーが描いた長方形の領域のサイズに基づいて地図を拡大または縮小します。

MapWrapper: 地図移動ツール。このツールは、Google または GPS 座標の形式でマーカーを Baidu Maps に追加する機能を提供します。

InfoBox: カスタム情報ウィンドウ ツール。 infoWindow と同様に、枠線や閉じるボタンのスタイルなどをカスタマイズできるなど、infoWindow よりも柔軟です。

LuShu: ロードブック、軌道モーション ツール。このツールはルートに沿ったマーカーの移動を実現するために使用され、一時停止などの機能を備えています。

CityList: 都市リスト ツール。このツールは、ユーザー向けに都市リストを直接生成し、都市選択操作を備えています。

AreaRestriction: エリア制限ツール。このツールは、百度地図の閲覧エリア制限設定をユーザーに提供します。

GeoUtils: 幾何学操作ツール。このツールは、点と四角形、円、多角形の線、および多角形の面との関係を判断し、多角形の長さと多角形の面積を計算する式を提供します。

TrafficControl: リアルタイムのトラフィック制御。地図上の交通流レイヤーの表示・非表示等をリアルタイムに行うツールです。

SearchControl: コントロールを取得します。このツールはモバイル デバイス用であり、都市リストの選択、ローカル検索ボックス、およびバス運転クエリ ボックスを提供します。対応する機能を提供します。

DrawingManager: マウス描画ツール。このツールを使用すると、ユーザーは地図上の任意の場所に点、線、絵を描き、線の距離と面の面積を表示できます。

EventWrapper: イベントパッケージ化ツール。このツールは、イベントを使用するためのよりユーザーフレンドリーなアプローチを提供します。

#TextIconOverlay: カスタム オーバーレイ ツール。ユーザーはこのツールを使用して、テキストおよびアイコン スタイルのオーバーレイをマップに追加できます。

SearchInRectangle: フレーム ズーム ツール。3 つの長方形の検索効果を実現するために使用されます。

SearchInfoWindow: 「Baidu マップ スタイル」情報ウィンドウ ツール。このツールは、検索ボックスを備えた情報ウィンドウをユーザーに提供し、このウィンドウの内容をさまざまなスタイルで自由にカスタマイズできます。同時に、ユーザーは情報ウィンドウのタイトルをテキスト メッセージとして携帯電話に送信できます。

マップにツールを追加する

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myPushpin = new BMap.PushpinTool(map);         // 创建标注工具实例    
myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息   
 alert("您标注的位置：" +     
       e.marker.getPoint().lng + ", " +     
       e.marker.getPoint().lat);    
});    
myPushpin.open();                                  // 开启标注工具

ボタンによるツールの開閉の制御

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDis = new BMapLib.DistanceTool(map);

一部のツール クラスでは、変更可能な構成パラメータが提供されています。 API ドキュメントを参照して、要件を満たすように変更してください。

この例では、エリア ズーム ツールのプロンプト テキストを追加します。