JavaScript API GL / 开发指南 / 控件

地图控件

本章介绍如何在地图上添加缩放、比例尺、3D罗盘控件等常用的基础控件，以及如何自定义控件样式。

添加基础控件

GL支持通过addControl方法添加地图缩放、比例尺、3D罗盘控件三种控件

示例说明:

function initMap() {
    var center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    map = new TMap.Map("container", {
      zoom: 12, //设置地图缩放级别
      center: center //设置地图中心点坐标
    });

    // 获取缩放控件实例
    control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
  }
  // 把存储的缩放控件添加到地图上
  function addControl() {
    map.addControl(control);
  }

查看在线示例

控件位置调整

GL支持通过setPosition方法调整控件位置。方式为在几个固定槽位进行选择，如果多个控件选择一个位置，会按照顺序进行排列

示例说明:

function setPosition(position) {
    if (!control) {
      return;
    }
    switch (position) {
      case 'center':
        control.setPosition(TMap.constants.CONTROL_POSITION.CENTER);
        break;
      case 'bottomRight':
        control.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT);
        break;
    }
 }

查看在线示例

自定义控件

GL支持通过setClassName方法,通过给控件dom元素添加类名的方式实现自定义控件样式,如示例中将缩放控件改为灰色。

示例说明:

<style>
.control .tmap-zoom-control { /*tmap-zoom-control为控件类名*/
  background-color: #F2F2F2;
}
</style>
<body>
  <div id="container"></div>
  <input type="button" id="btn-add-class" onclick="setClassName('control')" value="缩放控件背景变灰">
  <script>
    function initMap() {
        var center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        map = new TMap.Map("container", {
          zoom: 12, //设置地图缩放级别
          center: center, //设置地图中心点坐标
        });
        // 获取缩放控件实例
        control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
      }
     // 为缩放控件添加class，控制样式
    function setClassName(name) {
        if (!control) {
          return;
        }
        control.setClassName(name);
      }
  </script>
</body>

查看在线示例

这篇文章对您解决问题是否有帮助？

已解决
未解决