完美解决vue引入BMapGL is not defined的问题
作者:邱志刚
在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的解决