安装

在Vue在使用百度地图之前，需要先安装百度地图的SDK，在public目录下的index.html中引入百度地图的JS文件，如下：

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=SO2YMjvfzU4eqjwoEtYB7GCOKxSANBGS"></script>

其中ak是百度地图的密钥，需要在百度地图开放平台申请，申请地址：百度地图开放平台

配置全局组件

为了方便在Vue中使用百度地图，我们可以将百度地图封装成一个全局组件，这样就可以在任何地方使用百度地图了。

在src目录下新建一个components目录，然后在components目录下新建一个BaiduMap.vue文件，代码如下：

<template>
  <div class="map-main" @click.self="showClose">
    <span>{{ address }}</span>
    <div id="map-container" />
  </div>
</template>

<script>
import BMapGL from 'BMapGL'

export default {
  name: 'Map',
  props: {
    address: {
      type: String,
      default: '北京'
    }
  },
  watch: {
    address() {
      this.initMap()
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      // 创建Map实例
      const map = new BMapGL.Map('map-container')
      // 初始化地图,设置中心点坐标和地图级别 地图级别：3-19 地图级别越大，地图显示越详细
      map.centerAndZoom(this.address, 15)
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
    },
    // 关闭地图 触发父组件的closeMap方法
    showClose() {
      this.$emit('closeMap')
    }
  }
}
</script>

<style scoped>

.map-main {
  position: absolute;
  width: 100%;
  height: 100vh;
  /*背景透明*/
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.map-main span {
  display: block;
  margin: 0 auto;
  font-weight: bold;
  color: #67c23a;
  text-align: center;
}
#map-container {
  overflow: hidden;
  width: 70%;
  height: 75%;
  margin: 40px auto;
  opacity: 1;
  z-index: 999;
}
</style>

其中，我们在props中定义了一个address属性，用来接收父组件传递过来的地址信息，然后在watch中监听address属性的变化，当address属性发生变化时，调用initMap方法重新初始化地图。

但是import BMapGL from 'BMapGL'这一行代码会报错，我们只需在项目根目录下的vue.config.js文件中添加如下代码即可：

module.exports = {
  chainWebpack(config) {
    config.externals({ './cptable': 'var cptable', 'BMapGL': 'BMapGL' })
    // xxx 其他内容
  }
}

在页面中使用

在页面中使用百度地图，只需在页面中引入BaiduMap组件即可，如下：

页面结构:

<template>
  <div class="map">
    <div class="map-btn" @click="showMap">查看地图</div>
    <baidu-map v-show="mapDialogVisible" :address="address" @closeMap="closeMap" />
  </div>
</template>

页面逻辑：

<script>
import BaiduMap from '@/components/BaiduMap.vue'

export default {
  name: 'Map',
  components: { BaiduMap },
  data() {
    return {
      mapDialogVisible: false,
      address: '北京'
    }
  },
  methods: {
    // 显示地图
    showMap() {
      this.mapDialogVisible = true
    },
    // 关闭地图
    closeMap() {
      this.mapDialogVisible = false
    }
  }
}
</script>

showMap在需要显示地图的时候调用，closeMap在需要关闭地图的时候调用。

需要注意的是,在百度地图封装过程中,设置了一个点击地图的事件,当点击地图以外的遮罩的时候,会触发父组件的closeMap方法,从而关闭地图。

因此父组件无论如何都需要定义一个closeMap方法,否则会报错。