完美解决vue引入BMapGL is not defined的问题
更新时间:2024年10月18日 09:33:23 作者:邱志刚
在Vue项目中使用BMapGL时,通过在src下添加bmp.js文件并配置密钥(ak),可以有效解决地图API的应用问题,本方法是基于个人经验总结,希望能为开发者提供参考和帮助
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>完美解决啦!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
- 解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory
- vue中报错“error‘xxx‘ is defined but never used”问题及解决
- Vue-cli3 $ is not defined错误问题及解决
- 解决Vue控制台报错Failed to mount component: template or render function not defined.
- vue报错Cannot read properties of undefined (...)类型的解决办法
- vue在data中定义变量后依旧报undefined的解决
相关文章
vue create、vue webpack init创建vue项目产生的项目文件的区别
这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vue集成capacitor android并打包为apk实践
文章主要介绍了如何将Vue项目集成到Capacitor和Android Studio中,并打包成APK文件,过程中遇到了版本冲突、下载超时和Java版本不匹配等问题,并提供了相应的解决方案2026-03-03
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
这篇文章主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-06-06
vue this.$router.go(-1);返回时如何带参数
这篇文章主要介绍了vue this.$router.go(-1);返回时如何带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
使用Bootstrap + Vue.js实现添加删除数据示例
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-02-02
Vue 设置axios请求格式为form-data的操作步骤
今天小编就为大家分享一篇Vue 设置axios请求格式为form-data的操作步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10


最新评论