解决vue引入BMapGL is not defined的问题

最新推荐文章于 2023-11-10 09:33:32 发布

钢铁加lulu

最新推荐文章于 2023-11-10 09:33:32 发布

阅读量1.6w

点赞数 15

CC 4.0 BY-SA版权

分类专栏： vue 百度地图API

原文链接：https://www.jianshu.com/p/e238aaa4fa38

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

百度地图API

3 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度WebGL地图(BMapGL)，通过具体步骤和代码示例展示了如何配置地图密钥、创建地图实例并进行基本的地图操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目src下添加bmpgl.js，内容如下：（ak是密钥）

// bmpgl.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="container" 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("container");
        // 创建点坐标 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>
.allmap {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
</style>