vue百度地图api对于控件方法的使用

1.接上篇，获取百度地图api秘钥jspopularGL | 百度地图API SDK

2.安装

npm install vue-baidu-map --save

3.在main.js中引入

// 百度地图
 
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
 
  ak: '', //这个地方是官方提供的ak密钥
 
})

4.使用

（1）在template中使用地图

  <div class="MapTest">
    <!-- 引入地图 -->
    <baidu-map
      id="allmap"
      :center="center"
      :scroll-wheel-zoom="true"
      :zoom="zoom"
      @ready="handler"
    />
  </div>

（2）定义data数据

    data() {
      return {
        center: {
          lng: 116.404,
          lat: 39.915,
        },
        zoom: 6,
        // 经纬度数组
        pointsList: [
          {
            longitude: '116.46',
            latitude: '39.92',
            address: '北京',
          },
          {
            longitude: '116.2',
            latitude: '40.22',
            address: '昌平',
          },
          {
            longitude: '117.2',
            latitude: '39.13',
            address: '天津',
          },
          {
            longitude: '121.48',
            latitude: '31.22	',
            address: '上海',
          },
          {
            longitude: '106.54',
            latitude: '29.59',
            address: '重庆',
          },
          {
            longitude: '104.04',
            latitude: '30.40',
            address: '成都',
          },
          {
            longitude: '117.00',
            latitude: '36.40',
            address: '济南',
          },
          {
            longitude: '120.00',
            latitude: '36',
            address: '青岛',
          },
        ],
      }
    },

（3）methods方法

    // 引入地图
      handler({ BMap, map }) {
        let point = new BMap.Point(this.center.lng, this.center.lat) //Point(lng: Number, lat: Number)   以指定的经度和纬度创建一个地理点坐标
        map.centerAndZoom(point, 13) //设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

        let marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次

        let cityCtrl = new BMap.CityListControl() // 添加城市列表控件
        map.addControl(cityCtrl) //将控件添加到地图，一个控件实例只能向地图中添加一次

        let navigationControl = new BMap.NavigationControl() // 添加默认缩放平移控件
        map.addControl(navigationControl)

        let circle = new BMap.Circle(point, 6, {
          //Circle(center: Point, radius: Number, opts: CircleOptions)    创建圆覆盖物
          strokeColor: 'Red',
          strokeWeight: 10,
          strokeOpacity: 0.5,
          Color: 'Black',
          fillColor: '#f03',
        })
        map.addOverlay(circle)

        map.addControl(new BMap.ScaleControl()) // 添加比例尺
        map.addControl(new BMap.MapTypeControl()) //换地图类型的控件

        // 添加定位控件
        let geolocationControl = new BMap.GeolocationControl()
        geolocationControl.addEventListener('locationSuccess', function (e) {
          // 定位成功事件
          let address = ''
          address += e.addressComponent.province
          address += e.addressComponent.city
          address += e.addressComponent.district
          address += e.addressComponent.street
          address += e.addressComponent.streetNumber
          alert('当前定位地址为：' + address)
        })
        geolocationControl.addEventListener('locationError', function (e) {
          // 定位失败事件
          alert(e.message)
        })
        map.addControl(geolocationControl)

        //  对多个经纬度点进行标注
        this.pointsList.forEach((element) => {
          const mPoint = new BMap.Point(
            element.longitude * 1,
            element.latitude * 1
          )
          let myIcon = new BMap.Icon( // 自定义图标
            require('@/icon/car.png'),
            new BMap.Size(64, 64) // 图标的宽度和高度
          )
          let marker = new BMap.Marker(mPoint, {
            icon: myIcon,
          })
          map.addOverlay(marker)
          // 创建文字标注
          const label = new BMap.Label(element.address, {
            position: {
              lng: element.longitude * 1,
              lat: element.latitude * 1,
            }, // 文本绑定的点位位置
            offset: new BMap.Size(2, -16), // 文本位置移动
          })
          // 自定义文字样式
          label.setStyle({
            color: 'black',
            fontSize: '12px',
            height: '20px',
            lineHeight: '20px',
            border: '1px solid #000',
          })
          // 将标注添加到地图中
          map.addOverlay(label)
        })
      },

（4）css样式（关于样式中 如果将百度地图logo隐藏掉的话，关于百度地图中的比例尺控件也会被隐藏掉，暂时还没有找的很好的办法，不知道有没有大神有可以在不影响比例尺的显示的情况下将百度地图的logo隐藏掉）

 .MapTest {
    padding: 20px;
  }
  #allmap {
    width: 100%;
    height: calc(100vh - 240px);
  }
  :deep() {
    .ui_city_change_top .ui_city_change_inner,
    .ui_city_change_bottom .ui_city_change_inner {
      margin-left: 50px;
      display: inline-block;
      height: 24px;
      line-height: 24px;
      border: 1px solid #c4c7cc;
      background-color: #fff;
      padding: 0 10px 0 10px;
      color: #000;
    }
  }
  // 去掉百度地图左下角的logo
  // :deep() {
  //   // .BMap_cpyCtrl {
  //   //   display: none;
  //   // }
  //   // .anchorBL {
  //   //   display: none;
  //   // }
  // }

（5）完整代码

<template>
  <div class="MapTest">
    <!-- 引入地图 -->
    <baidu-map
      id="allmap"
      :center="center"
      :scroll-wheel-zoom="true"
      :zoom="zoom"
      @ready="handler"
    />
  </div>
</template>
<script>
  export default {
    name: 'BaiDuMapTest2',
    data() {
      return {
        center: {
          lng: 116.404,
          lat: 39.915,
        },
        zoom: 6,
        // 经纬度数组
        pointsList: [
          {
            longitude: '116.46',
            latitude: '39.92',
            address: '北京',
          },
          {
            longitude: '116.2',
            latitude: '40.22',
            address: '昌平',
          },
          {
            longitude: '117.2',
            latitude: '39.13',
            address: '天津',
          },
          {
            longitude: '121.48',
            latitude: '31.22	',
            address: '上海',
          },
          {
            longitude: '106.54',
            latitude: '29.59',
            address: '重庆',
          },
          {
            longitude: '104.04',
            latitude: '30.40',
            address: '成都',
          },
          {
            longitude: '117.00',
            latitude: '36.40',
            address: '济南',
          },
          {
            longitude: '120.00',
            latitude: '36',
            address: '青岛',
          },
        ],
      }
    },

    methods: {
      // 引入地图
      handler({ BMap, map }) {
        let point = new BMap.Point(this.center.lng, this.center.lat) //Point(lng: Number, lat: Number)   以指定的经度和纬度创建一个地理点坐标
        map.centerAndZoom(point, 13) //设初始化地图。 如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

        let marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次

        let cityCtrl = new BMap.CityListControl() // 添加城市列表控件
        map.addControl(cityCtrl) //将控件添加到地图，一个控件实例只能向地图中添加一次

        let navigationControl = new BMap.NavigationControl() // 添加默认缩放平移控件
        map.addControl(navigationControl)

        let circle = new BMap.Circle(point, 6, {
          //Circle(center: Point, radius: Number, opts: CircleOptions)    创建圆覆盖物
          strokeColor: 'Red',
          strokeWeight: 10,
          strokeOpacity: 0.5,
          Color: 'Black',
          fillColor: '#f03',
        })
        map.addOverlay(circle)

        map.addControl(new BMap.ScaleControl()) // 添加比例尺
        map.addControl(new BMap.MapTypeControl()) //换地图类型的控件

        // 添加定位控件
        let geolocationControl = new BMap.GeolocationControl()
        geolocationControl.addEventListener('locationSuccess', function (e) {
          // 定位成功事件
          let address = ''
          address += e.addressComponent.province
          address += e.addressComponent.city
          address += e.addressComponent.district
          address += e.addressComponent.street
          address += e.addressComponent.streetNumber
          console.log('当前定位地址为：' + address)
        })
        geolocationControl.addEventListener('locationError', function (e) {
          // 定位失败事件
          console.log(e.message)
        })
        map.addControl(geolocationControl)

        //  对多个经纬度点进行标注
        this.pointsList.forEach((element) => {
          const mPoint = new BMap.Point(
            element.longitude * 1,
            element.latitude * 1
          )
          let myIcon = new BMap.Icon( // 自定义图标
            require('@/icon/car.png'),
            new BMap.Size(64, 64) // 图标的宽度和高度
          )
          let marker = new BMap.Marker(mPoint, {
            icon: myIcon,
          })
          map.addOverlay(marker)
          // 创建文字标注
          const label = new BMap.Label(element.address, {
            position: {
              lng: element.longitude * 1,
              lat: element.latitude * 1,
            }, // 文本绑定的点位位置
            offset: new BMap.Size(2, -16), // 文本位置移动
          })
          // 自定义文字样式
          label.setStyle({
            color: 'black',
            fontSize: '12px',
            height: '20px',
            lineHeight: '20px',
            border: '1px solid #000',
          })
          // 将标注添加到地图中
          map.addOverlay(label)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .MapTest {
    padding: 20px;
  }
  #allmap {
    width: 100%;
    height: calc(100vh - 240px);
  }
  :deep() {
    .ui_city_change_top .ui_city_change_inner,
    .ui_city_change_bottom .ui_city_change_inner {
      margin-left: 50px;
      display: inline-block;
      height: 24px;
      line-height: 24px;
      border: 1px solid #c4c7cc;
      background-color: #fff;
      padding: 0 10px 0 10px;
      color: #000;
    }
  }
  // 去掉百度地图左下角的logo
  // :deep() {
  //   // .BMap_cpyCtrl {
  //   //   display: none;
  //   // }
  //   // .anchorBL {
  //   //   display: none;
  //   // }
  // }
</style>

附赠：百度地图JavaScript API v2.0类参考百度地图JSAPI 2.0类参考

最终实现效果图