1. 百度地圖API提供了一些默認的Control,可以直接進行添加,省去了不少代碼量。
具體可參考官方文檔:http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/widget
2. 還有一些其它的封裝好的控件,如:交通流量、全景圖、
可以在地圖初始化后,直接向 map 中添加相應的控件。
1 /** 2 * 添加地圖控件 3 **/ 4 function addMapControls() { 5 6 7 //添加地圖導航控件 8 map.addControl(new BMap.NavigationControl()); 9 10 //添加地圖比例尺控件 11 12 /** 13 * 比例尺工具與版本標識工具所用同一個class,anchorBL, 所以,當采用CSS方式 display:none 去掉左下角 14 * 的百度標識和版權標識時,縮放比例工具也會被隱藏。 15 **/ 16 var opts = {offset: new BMap.Size(150, 5)} 17 map.addControl(new BMap.ScaleControl(opts)); 18 19 /** 20 * 添加鷹眼圖 21 */ 22 map.addControl(new BMap.OverviewMapControl()); 23 24 /** 25 * 此種方法添加為三種類型,地圖/衛星/三維,其中切換至三維時無法顯示地圖,也無官方文檔所說的切換城市 26 * 不建議采用此種方法 27 */ 28 // map.addControl(new BMap.MapTypeControl()); 29 // map.setCurrentCity("合肥"); 30 31 //添加地圖控件, 矢量圖和衛星圖。 矢量圖為衛星地圖+矢量標注 32 map.addControl(new BMap.MapTypeControl({ 33 mapTypes: [ 34 BMAP_NORMAL_MAP, //矢量圖 35 //BMAP_SATELLITE_MAP,//衛星圖, 此選項不起作用 36 BMAP_HYBRID_MAP //混合圖, 衛星+矢量圖中的街道和標注 37 ] 38 })); 39 40 /** 41 * 添加交通流量圖 42 */ 43 addTrafficControl(); 44 }
注意:
3. TrafficControl 在 BMapLib 庫中,引用可參考代碼。
1 <link rel="stylesheet" href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css"/> 2 <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
4. ScaleControl 的樣式比較簡單,很容易被其他圖片顏色或者字體影響,可以自己修改樣式,本文沒有提供修改方式。
5. MapTypeControl 如果直接使用 map.addControl(new BMap.MapTypeControl()),出來的有三維地圖的選項,但是點擊時,並不能顯示三維地圖。
使用第二種方法,指定地圖類型,里面有三種類型,
BMAP_NORMAL_MAP
BMAP_SATELLITE_MAP,
BMAP_HYBRID_MAP
這里只選了 Normal 和 HYBIRD。
6. 全景圖參見后面的全景圖的文章。
7.. 頁面顯示