百度地圖(3)-添加地圖控件


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.. 頁面顯示

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM