最近项目切换地图，由以前的高德切换到百度，记录一下使用过程。
需求：需要在搜索框中搜索地方，显示下拉框选择具体位置，选中位置后，将位置标记在地图上；也可以直接在地图上选取位置。

第一步：安装一下插件

npm install vue-baidu-map --save

第二步：main.js中引用

import BaiduMap from 'vue-baidu-map'
// 百度地图
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'XXX'
})

第三步：页面中引用

// 简单使用
<template>
  <baidu-map :center="center" :zoom="zoom" @ready="initMap"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 10
    }
  },
  methods: {
    initMap ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

上面是简单的使用百度地图，下面奉上我的完整代码

<template>
  <div>
    <div class="search-wrap">
      <div class="search">
        <input v-model="keyword" class="search-input" type="text" @input="handleSearch">
        <el-button type="primary" size="small" @click="handleSubmit">确认</el-button>
      </div>

      <!-- 检索结果 -->
      <div v-show="showResultFlag" class="search-result">
        <div v-for="(item, index) in searchResult" :key="index" class="item" @click="handleSelect(item)">
          <p class="title">{{ item.title }}</p>
          <p class="address">{{ item.address }}</p>
        </div>
      </div>
    </div>
    <baidu-map
      class="bm-view"
      ak="XXX" 
      :center="mapCenter"
      :zoom="mapZoom"
      :scroll-wheel-zoom="true"
      @ready="onReady"
      @click="getClickInfo"
    />
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
const defaultInfo = {
  lng: 0,
  lat: 0,
  addressStr: '',
  title: '',
  province: '', // 省
  city: '', // 市
  district: '' // 区
}
export default {
  name: 'MapMaker',
  components: {
    BaiduMap
  },
  data() {
    return {
      ssq: {
        provinceName: '',
        cityName: '',
        districtName: ''
      },
      BMap: null,
      map: null,
      mapZoom: 15,
      mapCenter: { lng: 121.329402, lat: 31.228667 },
      keyword: '',
      searchResult: [], // 检索结果列表
      showResultFlag: true,
      selectInfo: Object.assign({}, defaultInfo)
    }
  },
  methods: {
    // 地图初始化回调
    onReady({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    // 搜索框的值发生变化就会调用
    handleSearch() {
      const self = this
      if (!self.keyword) { // 当搜索框的值长度为0时，关闭展示搜索结果的框
        self.showResultFlag = false
      }
      self.showResultFlag = true
      self.selectInfo = Object.assign({}, defaultInfo)
      const local = new this.BMap.LocalSearch(this.map, {
        renderOptions: {
          map: this.map,
          selectFirstResult: false
        },
        onSearchComplete: function(res) {
          console.log('results', res)
          if (res && res.Yr) {
            self.searchResult = [...res.Yr]
          }
        }
      })
      local.search(this.keyword)
    },
    handleSelect(item) {
      const self = this
      console.log('item', item)
      const title = item.title
      const { lng, lat } = item.marker.point
      const point = new this.BMap.Point(lng, lat)
      const geoc = new this.BMap.Geocoder()
      geoc.getLocation(point, function(res) {
        console.log('res------------', res)
        const addString =
          res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + title
        self.showResultFlag = false
        self.keyword = addString
        self.map.clearOverlays() // 清除地图上所有覆盖物
        self.map.addOverlay(new self.BMap.Marker({ lng, lat }))
        self.mapCenter.lng = lng
        self.mapCenter.lat = lat
        self.mapZoom = 18
        self.selectInfo = {
          lng,
          lat,
          addressStr: addString,
          title: title,
          province: res.addressComponents.province,
          city: res.addressComponents.city,
          district: res.addressComponents.district
        }
      })
    },
    handleSubmit() {
      // 我的百度地图是组件，在这一步触发父组件的方法提交数据
      this.$emit('submitAddressFun', this.keyword)
    },
    // 在地图上选取
    getClickInfo(e) {
      console.log(e)
      this.mapCenter.lng = e.point.lng
      this.mapCenter.lat = e.point.lat
      const BMapGL = this.BMap
      const map = this.map
      map.clearOverlays()
      const marker = new BMapGL.Marker(
        new BMapGL.Point(e.point.lng, e.point.lat)
      )
      map.addOverlay(marker)
      // 创建地理编码实例
      // eslint-disable-next-line no-undef
      const myGeo = new BMap.Geocoder()
      // 根据坐标逆解析地址
      // eslint-disable-next-line no-undef
      myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
        console.log('打印result------', result)
        if (result) {
          // 我的代码其实是用的result.surroundingPois[0]的address，手动点击地图获取地址，总是没有输入的准确，导致手动获取的地址总是不完整，所以我就没用result.address，这里就仁者见仁，智者见智。
          // const surroundAdd = result.surroundingPois[0] // 这个是选取周围建筑地第一个
          // this.keyword = surroundAdd.address

          if (result.address) { // 会出现一种情况，就是返回的address是空的，这个时候就要自己拼接一下
            this.keyword = result.address
          } else {
            const ad = result.addressComponents
            this.keyword = ad.province + ad.city + ad.district + ad.street + ad.streetNumber
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map-maker-wrapper {
  position: relative;
}
.btn-confrim {
  width: 120px;
  height: 56px;
  line-height: 56px;
  background-color: #5ac9d4;
  border-radius: 8px;
  color: #ffffff;
  text-align: center;
}
.bm-view {
//   margin-top: 30px;
  width: 100%;
  height: calc(100vh - 88px);
}
.search-wrap {
  position: relative;
  width: 350px;
  box-sizing: border-box;
  padding: 0 32px;
  .search {
        z-index: 5;
        width: 450px;
        height: 30px;
        position: absolute;
        top: -66px;
        left: 30%;
    }

    .search input {
        float: left;
        width: 350px;
        height: 100%;
        border: 1px solid #30ccc1;
        padding: 0 8px;
        outline: none;
    }

    .search button {
        float: left;
        /*width: 20%;*/
        height: 100%;
        background: #30ccc1;
        border: 1px solid #30ccc1;
        color: #fff;
        outline: none;
    }
  .search-result {
    position: absolute;
    top: -34px;
    left: 30%;
    width: 406px;
    z-index: 5;
    background-color: #fff;
    padding: 0 32px;
    border-radius: 10px;
    max-height: 420px;
    overflow-y: scroll;
    .item {
      border-bottom: 1px solid #ebeef2;
    //   padding: 32px 0;
      &:last-child {
        border-bottom: none;
      }
      .title {
        font-size: 14px;
        font-weight: 600;
        color: #313233;
        margin: 10px 0 5px;
      }
      .address {
        font-size: 12px;
        font-weight: 400;
        color: #9ca5b3;
        margin: 5px 0 10px;
        // margin-top: 8px;
      }
    }
  }
}
</style>