第一種方案：（無效）

在index.html文件中引入百度地圖

<script src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxx"></script>

但是并沒有用且報(bào)錯(cuò)

image.png

此處報(bào)錯(cuò)非常詭異，因?yàn)槲也捎脛?dòng)態(tài)引用的方式時(shí)并沒有報(bào)該錯(cuò)

第二種方案：(有效)

新創(chuàng)建一個(gè)文件utils/baiduMap.js

export function baiduMap(ak) {
  return new Promise(function (resolve, reject) {
    if (typeof window.BMap !== "undefined") {
      resolve(window.BMap);
      return true;
    }
    window.onBMapCallback = function () {
      resolve(window.BMap);
      return true;
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=onBMapCallback";
    script.onerror = reject;
    document.head.appendChild(script);
    return true;
  })
}

在百度地圖組件baidumap.vue中引用

import { baiduMap } from "@/util/baiduMap.js";
  mounted() {
    const ak = "xxxxxxxx";
    baiduMap(ak).then(() => {
      this.createMap(); // 創(chuàng)建地圖
    });
  },