vue2 百度地图添加控件

在 Vue2 中添加百度地图控件可以通过以下步骤实现：

1. 在 `index.html` 中引入百度地图 JavaScript API：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2. 在 Vue 组件中创建地图容器：

<template>
  <div id="map"></div>
</template>

3. 在 Vue 组件中初始化地图，并添加控件：

<script>
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // 初始化地图
    this.map = new BMap.Map("map");

    // 设置地图中心点和缩放级别
    let point = new BMap.Point(116.404, 39.915);
    this.map.centerAndZoom(point, 15);

    // 添加缩放控件
    let zoomControl = new BMap.ZoomControl();
    this.map.addControl(zoomControl);

    // 添加比例尺控件
    let scaleControl = new BMap.ScaleControl();
    this.map.addControl(scaleControl);

    // 添加地图类型控件
    let mapTypeControl = new BMap.MapTypeControl();
    this.map.addControl(mapTypeControl);
  }
}
</script>

在上述代码中，我们通过 `new BMap.Map("map")` 创建了一个地图实例，并通过 `centerAndZoom` 方法设置了地图的中心点和缩放级别。接着，我们通过 `new BMap.ZoomControl()`、`new BMap.ScaleControl()` 和 `new BMap.MapTypeControl()` 创建了三个控件，并通过 `addControl` 方法将它们添加到地图上。最后，我们将地图实例保存在组件的 `data` 中，以便后面的操作中使用。