zoukankan      html  css  js  c++  java
  • 百度地图(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.. 页面显示

  • 相关阅读:
    H5 WebSocket
    JS call()、apply()、bind()
    JS中this指向问题
    JS GET POST请求
    php 常用get post http请求
    php 开启redis
    egret接入华为快应用6004
    PHP生成公私钥,签名和验签
    JS数组去重
    Oracle第九课
  • 原文地址:https://www.cnblogs.com/googlegis/p/14680714.html
Copyright © 2011-2022 走看看