vue中引入百度地图

第一种方案：（无效）

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

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

但是并没有用且报错

image.png

此处报错非常诡异，因为我采用动态引用的方式时并没有报该错

第二种方案：(有效)

新创建一个文件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(); // 创建地图
    });
  },