vue引入BMapGL is not defined
在项目src下添加bmp.js
内容如下：（ak是密钥）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // bmp.jsexport 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文件中导入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <div class="home"> <div id="admap" class="allmap"></div> </div>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俱乐部。
