需求：
在项目中需要使用到百度地图，但是仅其中的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']
