首先我们引入vue-baidu-map地图，可以参考：https://blog.csdn.net/qq_39009348/article/details/90070142，里面有详细的vue-baidu-map的基本使用方法。更多覆盖物的使用请参考：https://blog.csdn.net/qq_39009348/article/details/106189999

需求：如果我们需要自定义一个控件区域，并且在该控件区域控制我们的某些标注是否显示，以及搜索详细地址，以及回到地图中心，该如何做呢？

首先我们引入自定义控件：

 在标签内加入一个自定义控件，里面布局自己设置，就和常规的布局一样了；

我的css代码（需要注意的是自定义控件默认的初始样式是在左上部分，自己根据需要改变初始样式即可）：

第一个功能：回到地图中心

首先根据每个账号可以设置一个地图的中心点，当用户切换到中心点以外的地方，即可点击回到地图中心，这个功能比较简单，直接点击时把经纬度赋值给标签中绑定的:center="{lng: map.center.lng, lat: map.center.lat}"即可；

第二个功能：切换标注隐藏显示

首先我们添加了一些标注的聚合点，我们想通过控制单选框来控制是否显示这些标注点（不止一个）

首先要说明的是，通过v-show来控制这个标签的显示隐藏是没有效果的；那要如何做呢？我们知道这个标注点是通过v-for遍历一个数组，绑定经纬度标注在地图页面的。当我们遍历一个空数组时，当然就不会显示这些标注了；所以我们的思路是通过计算属性去控制这个数组的数据来达到类似效果：

首先：请求要标注数据，保存在本地

然后，计算属性控制该数组是否有数据：

这样既完成了这个功能

第三个功能：搜索地址并且定位

原理和第一个回到地图中心一样的，获取经纬度，然后设置地图中心为该经纬度的值

getlalg为百度提供的根据地址获取经纬度的接口：

http://api.map.baidu.com/geocoder?address=' + address + '&output=json&key=cCQ1X0IjCVzdIxOD8nEguY&city='

// 通过获取经纬度定位

export const getlalg = (address) => {

  return Axios.get(Url.baiduMap + '/geocoder?address=' + address + '&output=json&key=你的秘钥&city=').then(res => res.data)

}

 回到地图中心：

上面搜索功能做完之后，搜索一个地址，地图中心也相应的在搜索的位置，所以地图切换到搜索的位置，回到地图中心即是设置了一个固定的地图中心点，每次进入地图初始位置并是该地图中心点，当我们对地图拖拽，离开了地图中心点，想要一键回到中心点该怎么做呢？很容易想到是获取中心点经纬度，重新给地图中心点赋值，即：

但事实上并没有效果，即点击回到中心点并不会回到中心点的可视范围内，为什么呢？因为中心点一直没变，保存在数据库里的中心点没变，拖拽地图并没有改变中心点，所以地图可视范围不会变的，但是我们发现搜索后中心点是变了，所以地图移动到了搜索位置，我们根据这个思路，只要在每次拖拽结束，获取到当前位置的中心点，赋值给地图中心点，回到中心点后去获取数据库的中心点即可完美解决：

 地图绑定拖拽结束事件

获取中心点经纬度，改变中心点 

 回到中心点：

效果图：