工具

地圖工具概述

提示：工具已經製作成開源程式庫（lib）對外免費開放，可直接存取 JavaScript 開源程式庫。若您需要執行以下範例程式碼，請先確認已在開發工程中引入lib文件，具體引用方法可查看 JavaScript 開源程式庫提供的範例原始檔。注意，開源程式庫必須與百度地圖JS API同時使用。

百度地圖提供了互動功能更為複雜的“工具”，它包括：

#MarkerTool：標註工具。透過此工具使用者可在地圖任意區域新增標註。

MarkerClusterer：多重標註聚合器。此工具解決載入大量點要素到地圖上造成緩慢，且產生覆蓋現象的問題。

MarkerManager：標註管理工具。此工具提供展示、隱藏、清除所有標註。

RichMarker：富標註工具。此工具為使用者提供自訂Marker樣式，並新增點擊、雙擊、拖曳等事件。

DistanceTool：測距工具。透過此工具使用者可測量地圖上任意位置之間的距離。

RectangleZoom：區域縮放工具。此工具將根據使用者拖曳繪製的矩形區域大小對地圖進行放大或縮小操作。

MapWrapper：地圖搬家工具。此工具提供了將Google或GPS座標形式的Marker添加到百度地圖上的功能。

InfoBox：自訂資訊視窗工具。類似infoWindow，比infoWindow更有彈性，例如可以自訂border，關閉按鈕樣式等。

LuShu：路書，軌跡運動工具。此工具用於實現marker沿路線移動，並有暫停等功能。

CityList：城市清單工具。此工具為使用者直接產生城市列表，並且自備選擇城市操作。

AreaRestriction：區域限制工具。此工具為使用者提供百度地圖瀏覽區域限制設定。

GeoUtils：幾何運算工具。此工具提供判斷點與矩形、 圓形、多邊形線、多邊形面的關係,並提供計算折線長度和多邊形的面積的公式。

TrafficControl：即時交通控制。此工具提供將交通流量圖層在地圖上的即時顯示，隱藏等。

SearchControl：檢索控制項。此工具針對行動端，提供城市清單選擇、本地檢索框、公車駕駛查詢框。並提供相應功能。

DrawingManager：滑鼠繪製工具。透過此工具使用者可在地圖任意位置畫點、畫線、畫面並顯示線的距離及面的面積。

EventWrapper：事件封裝工具。該工具提供了更人性化的事件使用方法。

TextIconOverlay：自訂覆蓋工具。使用者可以使用該工具在地圖上新增文字和圖示樣式的覆蓋物。

SearchInRectangle：拉框縮放工具，用於實作三種拉框搜尋效果。

SearchInfoWindow：「百度地圖樣式」的資訊視窗工具。該工具為用戶提供帶有搜尋框的資訊窗口，該窗口內容可自由自訂多種風格。同時，用戶可以將訊息視窗標題以簡訊方式發送到手機上。

工具類別在初始化時需要提供地圖實例參數，以便使工具在該地圖上生效。您可以在地圖上新增多個工具，但同一時刻只能有一個工具處於開啟狀態。標註工具和測距工具在完成​​一次操作後將自動退出開啟狀態，而區域縮放工具可自行設定是否自動關閉。

向地圖新增工具

在地圖正確初始化後，您可以建立工具實例。下面範例展示如何為地圖新增一個標註工具。

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();                                  // 开启标注工具

透過按鈕控制工具的開啟和關閉

工具類別沒有提供控制其開啟和關閉的UI元素。您可以根據需要自行創建這些元素，把它們放置在地圖區域內或區域外均可。呼叫工具類別的open和close可控制工具的開啟和關閉。

首先初始化地圖並建立測距工具實例：

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

接著我們建立兩個按鈕元素並為其新增點擊事件。

拉框放大工具

一些工具類別提供了可修改的設定參數，您可參考API文件來修改它們以便符合您的要求。

本範例為區域縮放工具新增提示文字。

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);    
var myDrag = new BMapLib.DragAndZoomTool(map, {    
 followText : "拖拽鼠标进行操作"    
});