地图UI控件 | 百度地图API SDK

控件	类名	简介
控件	类名	简介
抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
缩放	ZoomControl	默认位于地图右下方，控制地图级别的缩放
定位	LocationControl	默认位于地图左下方，用于获取定位
城市选择列表	CityListControl	默认位于地图左上方，用于进行城市选择定位
版权	CopyrightControl	默认位于地图左下方，用于展示版权信息
地图类型	MapTypeControl	默认位于地图右上方，控制地图类型
地图控制	NavigationControl	默认位于地图左上方，控制地图平移、缩放级别、定位
地图3D控制	NavigationControl3D	默认位于地图右上方，控制地图旋转、倾斜
鹰眼地图	OverviewMapControl	默认位于地图右下方，显示鹰眼地图

向地图添加控件

使用Map.addControl()方法向地图添加控件。
1. 参考展示地图教程完成地图初始化


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,
    html,
    #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }
  </style>
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
  <title>地图展示</title>
</head>
<body></body>
<script type="text/javascript">
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</html>

2. 声明控件并添加到地图中


var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMap.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMap.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

控制控件位置

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。

anchor值	位置说明
anchor值	位置说明
BMAP_ANCHOR_TOP_LEFT	表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT	表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	表示控件定位于地图的右下角

控件位置偏移

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。
如下示例为：将比例尺放置在地图的左下角，由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。


var opts = {
    offset: new BMap.Size(150, 5)
}
// 添加控件
map.addControl(new BMap.ScaleControl(opts));
// 移除控件
map.removeControl(new BMap.ScaleControl(opts));

地图常用名词

右键菜单

本篇文章对您是否有帮助？