一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
控件
这个控件的概念类似echarts中的组件，例如地图里面控制放大缩小的图表、标尺等等工具。
1. 缩放控件
首先我们添加一个控制zoom的组件：
<body>
<div id="map"></div>
<script>
// 地图对象初始化
let map = new BMapGL.Map('map', {
// 传入初始化参数（具体可以官方文档）
minZoom: 8,
maxZoom: 12
});
// 地图中心坐标 - 后续地图绘制都需要这种坐标
let point = new BMapGL.Point(116.404, 39.915);
// 可以展示地图了
map.centerAndZoom(point, 10);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
map.setHeading(0);
map.setTilt(70);
// 设置缩放范围 - 但是这个API在实际map对象原型上没有，官方文档有，这也是一个坑
map.setMinZoom(8);
map.setMaxZoom(12)
let zoomCtrl = new BMapGL.ZoomControl({
// 初始位置
anchor: BMAP_ANCHOR_BOTTOM_LEFT,
// 进行位移
offset: new BMapGL.Size(100, 0)
});
map.addControl(zoomCtrl);
</script>
</body>
注意百度文档不一定百分百可信，出现问题还是要打印对象看
2. 标尺控件
这个控件用于描述地图上一段距离代表的实际长度，他会根据你的实际缩放比例调整文案：
// 添加事件
map.addEventListener('zoomstart', function(){
console.log(map.getZoom());
})
let scaleCtrl = new BMapGL.ScaleControl({
anchor: BMAP_ANCHOR_TOP_LEFT
})
map.addControl(scaleCtrl)
个性化地图
即可以自定义百度地图的部分样式，例如地图上面区域换一个颜色，路径换一个颜色等等。
这里我们可以前往百度的个性化地图中编辑，通过一些样式模板以及二次操作来生成最后的地图样式：
最后配置好了之后可以发布样式，同时获取一个样式ID，在我们的代码中新增：
map.setMapStyleV2({
styleId:'xxxxx'
})
就可以生效新的样式了！
另外也可以获取配置的JSON文件，然后复制到本地：
map.setMapStyleV2({
styleJson:{...}
})
