百度地图（3）-添加地图控件

时间：2024-02-29 12:08:57

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.. 页面显示

 

相关文章