动态引入百度地图

前言：

根据百度地图官方的文档，key 是直接放在 index.html 文件中，通过 script 标签的方式进行引入。
但是在实际的开发中，我们开发环境和生产环境所使用的 key 一般是不一样的，所以每次打包的时候需要手动不断修改 index.html 中的 key 。这样就会造成有时候会忘记修改，那么应该如何正确使用呢？

思路：

动态加载百度地图，把百度地图密钥存储在环境变量中，通过 js 创建 script 标签动态引入百度地图脚本，然后再抛出函数，在所需要的子组件中使用。

实现：

1.首先，在你的Vue项目的 .env.development 和 .env.production 文件中，分别设置百度地图的密钥变量：

（没有 .env.development 和 .env.production 文件的在根目录下创建，不了解这两个文件意义的请百度或看官方网站）
.env.development:

VUE_APP_BAIDU_MAP_KEY=your_development_key_here

.env.production:

VUE_APP_BAIDU_MAP_KEY=your_production_key_here

2.动态引入百度地图脚本的代码单独封装为一个JavaScript文件，并在HTML中引入该文件时，可以按照以下步骤操作：

2.1创建一个名为 baiduMap.js 的JavaScript文件，并将下面的代码复制到该文件中：

// baiduMap.js

const baiduMapKey = process.env.VUE_APP_BAIDU_MAP_KEY;

export function getBMap () {
    
    
  if (!baiduMapKey) {
    
    
    return;
  }
  const BMap_URL = `https://api.map.baidu.com/api?v=3.0&ak=${
      
      baiduMapKey}&s=1&callback=onBMapCallback`;
  return new Promise((resolve, reject) => {
    
    
    // 如果已加载直接返回
    if (typeof BMap !== 'undefined') {
    
    
      resolve(BMap)
      return true;
    }

    // 百度地图异步加载回调处理
    window.onBMapCallback = () => {
    
    
      console.log('百度地图脚本初始化成功...');
      // console.log(BMap);
      resolve(BMap)
    }

    // 插入script脚本
    const scriptElement = document.createElement('script');
    scriptElement.type = 'text/javascript'
    scriptElement.src = BMap_URL
    document.head.appendChild(scriptElement);
  })
}

2.2将 baiduMap.js 文件放置在Vue项目中的合适位置，例如在 src 目录下的 utils 文件夹中.

2.3子组件中引入 getBMap()

以 vue-cli 创建的初始模板中的 HomeView.vue 为例:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div id="map" style="width: 400px;height: 400px;"></div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
  
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {
    
    getBMap} from '@/utils/baiduMap.js'

export default {
    
    
  name: 'HomeView',
  components: {
    
    
    HelloWorld
  },
  mounted() {
    
    
    this.initMap()
  },
  methods: {
    
    
    async initMap() {
    
    
      const BMap = await getBMap()
      const map = new BMap.Map('map')
      const centerPoint = new BMap.Point(120.186582, 30.317703)
      map.centerAndZoom(centerPoint, 15)
    }
  }
}
</script>

效果如下：