完美解决vue引入BMapGL is not defined的问题
vue引入BMapGL is not defined在项目src下添加bmp.js
内容如下：（ak是密钥）
// bmp.js
export function BMPGL(ak) {
return new Promise(function(resolve, reject) {
window.init = function() {
// eslint-disable-next-line
resolve(BMapGL)
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
script.onerror = reject
document.head.appendChild(script)
})
}
在要用到BMapGL的vue文件中导入
<template>
<div class="home">
<!--创建地图容器-->
<div id="admap" class="allmap"></div>
</div>
</template>
<script>
import { BMPGL } from "@/bmpgl.js"
export default {
name: "home",
data() {
return {
ak: "XXXXXXXXX", // 百度的地图密钥
myMap: null
};
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// 传入密钥获取地图回调。
BMPGL(this.ak).then((BMapGL) => {
// 创建地图实例
let map = new BMapGL.Map("admap");
// 创建点坐标 axios => res 获取的初始化定位坐标
let point = new BMapGL.Point(114.031761, 22.542826)
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 19)
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true)
map.setHeading(64.5)
//map.setTilt(73)
// 保存数据
// this.myMap = map
})
.catch((err)=>{
console.log(err)
})
},
}
};
</script>
<style lang="scss" scoped>
.admap{
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}
</style>完美解决啦！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源:https://www.jb51.net/javascript/328983iv7.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]