IT俱乐部 JavaScript 完美解决vue引入BMapGL is not defined的问题

完美解决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文件中导入

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俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/14099.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部