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文件中导入
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) }) }, } }; .admap{ width: 100%; height: 100vh; position: relative; z-index: 1; }
完美解决啦!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。