1.安装

1）安装

npm install vue-baidu-map --save

2）组件注册
（1）main.js引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

参考vue-baidu-map官方网址

2.组件封装

1）查询组件封装，新建baiduMapPoint/index.vue文件，代码如下：

<!--
 * @Description:根据经纬度反查地点
 * @Author: duyan
 * @Date: 2021-11-11 16:11:12
 * @LastEditTime: 2021-11-24 11:26:55
 * @LastEditors: duyan
-->
<template>
  <div class="map-container">
    <baidu-map
      v-loading.lock="mapLoading"
      id="map-container"
      v-bind="$attrs"
      :center="mapCenter"
      :zoom="zoom"
      :class="className"
      :style="{ height, width }"
      class="map-content"
      v-on="$listeners"
      @ready="onReady"
    >
      <!-- 地图可视化区域容器 -->
      <bm-view class="view-container" />
      <bm-info-window :position="infoWindowMsg.point" :title="infoWindowMsg.title||''" :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen">
        <p>{{ infoWindowMsg.address }}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  name: 'BaiduMapDemo',
  components: {
    BaiduMap
  },
  props: {
    // 地图容器自定义类名
    className: {
      type: String,
      default: 'map'
    },

    // 地图宽度
    width: {
      type: String,
      default: '100%'
    },

    // 地图高度
    height: {
      type: String,
      default: '100%'
    },

    // 地图中心点
    center: {
      type: Object,
      default: null
    },

    // 地图缩放等级
    zoom: {
      type: Number,
      default: 14
    },
    // 地图图标
    pointIcon: {
      type: String,
      default: ''
    },
    // 地图数据信息
    pointMsg: {
      type: Object,
      default: () => {}
    },
    // 地图数据List
    pointMsgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 地图中心点位置
      centerPoint: null,
      // 解析地址所在的城市名
      city: '云南省昆明市',

      // 百度默认图标对象
      defaultIcon: {
        url: 'https://api.map.baidu.com/images/marker_red_sprite.png',
        size: { width: 19, height: 25 },
        opts: {
          anchor: { width: 10, height: 25 },
          imageOffset: { width: 0, height: 0 },
          imageSize: undefined,
          infoWindowAnchor: { width: 10, height: 0 },
          printImageUrl: ''
        }
      },

      // 地图是否加载完成
      isReady: false,
      mapLoading: false,
      infoWindowShow: false,
      infoWindowMsg: {
        address: '',
        point: {},
        title: ''
      }
    }
  },
  computed: {
    mapCenter: {
      get() {
        return this.center && Object.keys(this.center).length ? this.center : this.centerPoint
      },
      set(val) {
        this.centerPoint = val
      }
    }
  },
  created() {
    this.mapLoading = true
  },
  methods: {
    onReady({ BMap, map }) {
      this.$bmap = BMap
      this.$map = map
      if (this.pointMsg && Object.keys(this.pointMsg).length > 0) {
        this.mapCenter = this.pointMsg.point
        this.addMarker(this.pointMsg.point, this.pointMsg)
      }
      if (this.pointMsgList.length > 0) {
        this.mapCenter = this.pointMsgList[0].point
        this.addParkMarker(this.pointMsgList)
      }
      this.mapLoading = false
      this.isReady = true
    },

    // 添加标记点
    addMarker(point, item) {
      const pt = new this.$bmap.Point(point.lng, point.lat)
      // 创建一个地图标注实例
      const mk = new this.$bmap.Marker(pt)
      // 将覆盖物添加到地图中
      this.$map.addOverlay(mk)
      this.$map.centerAndZoom(point, this.zoom)
      // 添加标记点击事件
      this.mkClick(mk, item)
    },
    // 添加社区标记
    addParkMarker(list) {
      list && list.length && list.forEach(item => {
        const pt = new this.$bmap.Point(+item.point.lng, +item.point.lat)
        // 创建一个地图标注实例
        const mk = new this.$bmap.Marker(pt, { title: item.address })

        // 将覆盖物添加到地图中
        this.$map.addOverlay(mk)

        // 添加标记点击事件
        this.mkClick(mk, item)
      })
    },
    /**
     * 标记点击事件
     * @param {Marker} mk 地图标记点
     * @param {object} item 标记点数据
     */
    mkClick(mk, item) {
      mk.addEventListener('click', res => {
        console.log('windowPoint--', item)
        this.infoWindowShow = !this.infoWindowShow
        this.infoWindowMsg.address = item.address
        this.infoWindowMsg.point = item.point
        this.infoWindowMsg.title = item.title || ''
      })
    },
    // 详情信息查看
    infoWindowClose() {
      this.infoWindowShow = false
    },
    infoWindowOpen() {
      this.infoWindowShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container{
  height: 100%;
  margin-top:10px;
  .map-form{
    padding: 10px;
  }
}
#map-container {
  height: calc(100% - 40px);
  width: 100%;
  .view-container {
    height: 100%;
    width: 100%;

    ::v-deep.BMap_cpyCtrl {
      display: none !important;
    }
  }
}
</style>

2） 展现组件封装，新建baiduMapPointShow/index.vue文件，代码如下：

<!--
 * @Description:根据经纬度反查地点
 * @Author: duyan
 * @Date: 2021-11-11 16:11:12
 * @LastEditTime: 2021-11-24 11:26:55
 * @LastEditors: duyan
-->
<template>
  <div class="map-container">
    <baidu-map
      v-loading.lock="mapLoading"
      id="map-container"
      v-bind="$attrs"
      :center="mapCenter"
      :zoom="zoom"
      :class="className"
      :style="{ height, width }"
      class="map-content"
      v-on="$listeners"
      @ready="onReady"
    >
      <!-- 地图可视化区域容器 -->
      <bm-view class="view-container" />
      <bm-info-window :position="infoWindowMsg.point" :title="infoWindowMsg.title||''" :show="infoWindowShow" @close="infoWindowClose" @open="infoWindowOpen">
        <p>{{ infoWindowMsg.address }}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  name: 'BaiduMapDemo',
  components: {
    BaiduMap
  },
  props: {
    // 地图容器自定义类名
    className: {
      type: String,
      default: 'map'
    },

    // 地图宽度
    width: {
      type: String,
      default: '100%'
    },

    // 地图高度
    height: {
      type: String,
      default: '100%'
    },

    // 地图中心点
    center: {
      type: Object,
      default: null
    },

    // 地图缩放等级
    zoom: {
      type: Number,
      default: 14
    },
    // 地图图标
    pointIcon: {
      type: String,
      default: ''
    },
    // 地图数据信息
    pointMsg: {
      type: Object,
      default: () => {}
    },
    // 地图数据List
    pointMsgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 地图中心点位置
      centerPoint: null,
      // 解析地址所在的城市名
      city: '云南省昆明市',

      // 百度默认图标对象
      defaultIcon: {
        url: 'https://api.map.baidu.com/images/marker_red_sprite.png',
        size: { width: 19, height: 25 },
        opts: {
          anchor: { width: 10, height: 25 },
          imageOffset: { width: 0, height: 0 },
          imageSize: undefined,
          infoWindowAnchor: { width: 10, height: 0 },
          printImageUrl: ''
        }
      },

      // 地图是否加载完成
      isReady: false,
      mapLoading: false,
      infoWindowShow: false,
      infoWindowMsg: {
        address: '',
        point: {},
        title: ''
      }
    }
  },
  computed: {
    mapCenter: {
      get() {
        return this.center && Object.keys(this.center).length ? this.center : this.centerPoint
      },
      set(val) {
        this.centerPoint = val
      }
    }
  },
  created() {
    this.mapLoading = true
  },
  methods: {
    onReady({ BMap, map }) {
      this.$bmap = BMap
      this.$map = map
      if (this.pointMsg && Object.keys(this.pointMsg).length > 0) {
        this.mapCenter = this.pointMsg.point
        this.addMarker(this.pointMsg.point, this.pointMsg)
      }
      if (this.pointMsgList.length > 0) {
        this.mapCenter = this.pointMsgList[0].point
        this.addParkMarker(this.pointMsgList)
      }
      this.mapLoading = false
      this.isReady = true
    },

    // 添加标记点
    addMarker(point, item) {
      const pt = new this.$bmap.Point(point.lng, point.lat)
      // 创建一个地图标注实例
      const mk = new this.$bmap.Marker(pt)
      // 将覆盖物添加到地图中
      this.$map.addOverlay(mk)
      this.$map.centerAndZoom(point, this.zoom)
      // 添加标记点击事件
      this.mkClick(mk, item)
    },
    // 添加社区标记
    addParkMarker(list) {
      list && list.length && list.forEach(item => {
        const pt = new this.$bmap.Point(+item.point.lng, +item.point.lat)
        // 创建一个地图标注实例
        const mk = new this.$bmap.Marker(pt, { title: item.address })

        // 将覆盖物添加到地图中
        this.$map.addOverlay(mk)

        // 添加标记点击事件
        this.mkClick(mk, item)
      })
    },
    /**
     * 标记点击事件
     * @param {Marker} mk 地图标记点
     * @param {object} item 标记点数据
     */
    mkClick(mk, item) {
      mk.addEventListener('click', res => {
        console.log('windowPoint--', item)
        this.infoWindowShow = !this.infoWindowShow
        this.infoWindowMsg.address = item.address
        this.infoWindowMsg.point = item.point
        this.infoWindowMsg.title = item.title || ''
      })
    },
    // 详情信息查看
    infoWindowClose() {
      this.infoWindowShow = false
    },
    infoWindowOpen() {
      this.infoWindowShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container{
  height: 100%;
  margin-top:10px;
  .map-form{
    padding: 10px;
  }
}
#map-container {
  height: calc(100% - 40px);
  width: 100%;
  .view-container {
    height: 100%;
    width: 100%;

    ::v-deep.BMap_cpyCtrl {
      display: none !important;
    }
  }
}
</style>

3.使用

1）地图选点引用
（1）html

  <baidu-map-point ref="bmap" scroll-wheel-zoom @mapLocationHandleClick="mapLocationHandle"/>

（2）js

<script>
import baiduMapPoint from '@/views/components/baiduMapPoint/index'
 // 部件
  components: {
    baiduMapPoint
  },
  methods:{
    // 地图选择确定
    mapLocationHandle(data, type) {
     console.log('data-----------', data)
     console.log('type-----------', type)
    }
   }
</script>

2）地图展现引用
（1）html

   <baidu-map-point-show ref="bmap" :point-msg-list="pointMsgList" scroll-wheel-zoom/>

（2）js

<script>
import baiduMapPointShow from '@/views/components/baiduMapPointShow/index'
 // 部件
  components: {
    baiduMapPointShow 
  },
    // 数据
  data() {
    return {
      pointMsgList: [
	      {
	        point: {
	          lng: 102.712251, 
	          lat: 25.040609 
	        },
	        address: 云南省昆明市盘龙区地址,
	        title: '起点'
	      }
		]
    }
  },
  methods:{
    // 地图选择确定
    mapLocationHandle(data, type) {
     console.log('data-----------', data)
     console.log('type-----------', type)
    }
   }
</script>