地图控件 Fengmap JavaScript SDK 提供多个控件。控件与地图之间存在交互。本模块将对控件交互部分提供说明介绍。

注：除指北针控件外，其余控件的创建都在loadComplete事件之后，因为控件需在地图加载完成后，才能与地图有交互。

楼层控件

Fengmap JavaScript SDK 提供两种类型的楼层切换控件，scrollGroupsControl和buttonGroupsControl。该两种楼层控件只在显示样式上有区别，与地图交互及回调事件保持完全一致的接口。

• • 创建楼层控件1（包括楼层按钮和单/多楼层切换按钮）

  //楼层控制控件配置参数
  var ctlOpt = new fengmap.controlOptions({
      position: fengmap.controlPositon.RIGHT_TOP,//默认在右上角
      showBtnCount: 7,  //默认显示楼层的个数
      allLayer:false,   //初始是否是多层显示，默认单层显示
      needAllLayerBtn: true, //是否显示多层/单层切换按钮
      //位置x,y的偏移量
      offset: {
          x: -20,
          y: 20
      }
  });
  var groupControl;
  //地图加载完成回掉方法
  map.on('loadComplete', function () {
      //创建楼层(按钮型)，创建时请在地图加载后(loadComplete回调)创建。
      groupControl = new fengmap.scrollGroupsControl(map, ctlOpt);
  });

• • 创建楼层控件2（只有楼层按钮，不带楼层切换按钮）

  //楼层控制控件配置参数
  var ctlOpt = new fengmap.controlOptions({
      position: fengmap.controlPositon.RIGHT_TOP,//默认在右下角
      showBtnCount: 7,  //默认显示楼层的个数
      //位置x,y的偏移量
      offset: {
          x: -20,
          y: 20
      }
  });
  var groupControl;
  //地图加载完成回掉方法
  map.on('loadComplete', function () {
      //创建楼层(按钮型)，创建时请在地图加载后(loadComplete回调)创建。
      groupControl = new fengmap.buttonGroupsControl(map, ctlOpt);
  });

• • 楼层控件交互事件。楼层控件楼层变化时会回调楼层变化方法。该方法放在创建楼层控件之后。

  //通过楼层切换控件切换聚焦楼层时的回调函数
  //groupControl 即为楼层控件对象
  groupControl.onChange(function(groups,allLayer){
      //groups 表示当前要切换的楼层ID数组,
      //allLayer表示当前楼层是单层状态还是多层状态。
      //...
  });

放大/缩小控件

Fengmap JavaScript SDK 提供放大、缩小控件，放大、缩小控件按钮点击时会根据比例尺级别放大和缩小地图，并提供回调方法。

• • 创建控件。参考代码如下：

  //放大、缩小控件配置
  var ctlOpt1 = new fengmap.controlOptions({
      position: fengmap.controlPositon.LEFT_TOP, //位置 左上角
      //位置x,y的偏移量
      offset: {
          x: 20,
          y: 60
      }
  });
  //放大、缩小控件
  //map为FMMap对象，初始化需在地图加载后完成。
  var zoomControl = new fengmap.zoomControl(map, ctlOpt1);
  

• • 控件交互，通过按钮放大、缩小控件进行放大、缩小时，会回调当前的比例尺级别。

  map.on('scaleLevelChanged', function (d) {
      console.log('当前级别：', map.scaleLevel);
  });

单/多层楼层切换控件

Fengmap JavaScript SDK 提供单/多层楼层，通过该控件可操作地图的单层或多层显示，并回调方法，返回当前控件类型和对应的操作值。

• • 创建控件。参考代码如下：

  //单/多层楼层控件配置
  var toolControl = new fengmap.toolControl(map,{
      allLayer:false, //设置初始单楼层状态。
      viewModeButtonNeeded:false, //设置为false,表示只显示楼层切换按钮。
      //点击按钮的回调方法,返回type表示按钮类型,value表示对应的功能值
      clickCallBack:function(type,value){
          // console.log(type,value);
      }
  });
  

• • 控件交互，通过控件操作地图的单/多层楼层状态时，会回调方法，返回当前操作类型。返回方法可参考创建控件的代码所示。

2D/3D切换控件

Fengmap JavaScript SDK 提供2D、3D切换控件，通过控件可操作地图的2D或3D显示，并回调方法，返回当前控件类型和对应的操作值。

• • 创建控件。参考代码如下：

  //2D、3D控件配置
  var toolControl = new fengmap.toolControl(map,{
      init2D:false,   //初始化2D模式
      groupsButtonNeeded:false,   //设置为false表示只显示2D,3D切换按钮
      //点击按钮的回调方法,返回type表示按钮类型,value表示对应的功能值
      clickCallBack:function(type,value){
          // console.log(type,value);
      }
  });
  

• • 控件交互，通过控件操作地图的2D、3D状态时，会回调方法，返回当前操作类型。返回方法可参考创建控件的代码所示。

指北针控件

Fengmap JavaScript SDK 提供指北针控件，通过开关设置其显示或隐藏，默认隐藏，并监听指北针点击事件。

• • 初始化指北针位置。参考代码如下：

  //初始化指北针位置
  map = new fengmap.FMMap({
      container : document.getElementById('fengMap'),    //渲染dom
      compassOffset:[20,20],          //初始指北针的偏移量，[左，上]
      compassSize: 48,                //指北针大小默认配置
      appName:'蜂鸟研发SDK_2_0',               //开发者申请应用名称
      key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
  });
  

• • 显示指北针。参考代码如下：

  //显示指北针
  map.showCompass = compassVisible;
  

• • 点击指北针事件。参考代码如下：

  // 如：点击指南针事件, 使角度归0
  map.on('mapClickCompass', function() {
         map.rotateTo({
          to: 0,           //设置角度
          duration: .3,      //动画持续时间，默认为。3秒
          callback: function() {             //回调函数
              // console.log('rotateTo complete!');
          }
      })
  });
  

气泡信息框

Fengmap JavaScript SDK 提供气泡信息框功能，根据传入的地图坐标或屏幕坐标在地图相应位置添加气泡信息框,气泡信息框里的内容可自定义填充HTML元素。

• • 初始化气泡信息框。参考代码如下：

  //信息框控件大小配置
  var ctlOpt = new fengmap.controlOptions({
      mapCoord: {
          //设置弹框的x轴
          x: event.target.x,
          //设置弹框的y轴
          y: event.target.y,
          //设置弹框位于的楼层
          groupID: 1
      },
      //设置弹框的宽度
      width: 200,
      //设置弹框的高度
      height: 100,
      marginTop: 10,
      //设置弹框的内容
      content: '这是一个信息框'
  });
  

• • 显示气泡信息框。参考代码如下：

  //添加弹框到地图上
  var popMarker = new fengmap.FMPopInfoWindow(map, ctlOpt);
  

• • 关闭气泡信息框。参考代码如下：

  // 关闭气泡信息框。
  popMarker.close();