浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
添加控件
更新时间:2022年08月07日
简介
控件是负责与地图交互的UI元素,百度地图JS API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
详情可见类参考
控件 类名 简介
抽象基类 Control 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺 ScaleControl 默认位于地图左下方,显示地图的比例关系
缩放 ZoomControl 默认位于地图右下方,控制地图级别的缩放
定位 LocationControl 默认位于地图左下方,用于获取定位
城市选择列表 CityListControl 默认位于地图左上方,用于进行城市选择定位
版权 CopyrightControl 默认位于地图左下方,用于展示版权信息

向地图添加控件
使用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>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键,修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
2声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
控制控件位置
初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。
anchor值 位置说明
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角
控件位置偏移

除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。

如下示例为:将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。

var opts = {
    offset: new BMapGL.Size(150, 5)
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消