Vue中单页面动态引入百度地图

需求：
在项目中需要使用到百度地图，但是仅其中的1-2个页面需要使用到，所以不想在index.html全局引用。
在组件文件中怎么动态引入呢？
刚开始的时候，直接通过DOM操作方式插入script标签到当前document中，如下：

let scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", "http://api.map.baidu.com/api?v=3.0&ak=您的密钥");
document.body.appendChild(scriptNode);

结果是不行的。
最终优化解决方案
新建一个baidu-map.js文件

export default {
  init: function () {
    //console.log("初始化百度地图脚本...");
    const AK = 'by0OTdhUGo3wYuMojowmKpWe'
    // http://api.map.baidu.com/api?v=3.0&ak=by0OTdhUGo3wYuMojowmKpWe
    const BMap_URL = 'http://api.map.baidu.com/api?v=3.0&ak=' + AK + '&callback=onBMapCallback'
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof BMap !== 'undefined') {
        resolve(BMap)
        return true
      }
      // 百度地图异步加载回调处理
      window.onBMapCallback = function () {
        console.log('百度地图脚本初始化成功...')
        resolve(BMap)
      }

      // 插入script脚本
      let scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', BMap_URL)
      document.body.appendChild(scriptNode)
    })
  },
}

在相关页面进行引用

import BaiduMap from '../../utils/baidu-map'

...
mounted(){
    BauduMap.init()
    .then((BMap) => {
        console.log(BMap)
        console.log("加载成功...")
    })
}
...  

如果页面中的元素需要触发事件，对应的事件代码是不能写在init里的，而触发的事件逻辑又基于init，此时可以通过回调函数的方法实现，示例代码如下（Vue3写法）：

setup() {
  let searchCallback
  cosnt handleFromPage = ()=>{
    searchCallback(query)
  }
 const initMap = () => {
    BaiduMap.init().then((BaiduMap) => {
        searchCallback = (query) => {
          console.log('im in callback')
          //这里写具体的逻辑代码
        }
    })
}

在vue中的百度地图生成的信息弹窗是动态生成的元素
绑定事件不能用@click，要用onclick，同时事件写在window对象上

 onclick="showProtectText(${item.bKeyID})"
window['showProtectText'] = function (bKeyID) {
  console.log(bKeyID)
}

但是给window添加属性，使用完之后一定记得删除

delete window['showProtectText']