请问老师异步加载BMap

来源：7-13 百度地图可视化之炫酷飞线动画（下）

hy_wang

2020-08-31

请问下老师我异步加载一直报错BapGL is not definde，应该如何解决？
我并不想在webpack中显示去配置，请求应该如何解决

<template>
    <div id="map_container">

    </div>
</template>
<script>
export default {
  methods: {
    init() {
      const cityCenter = mapv.utilCityCenter.getCenterByCityName("北京");
      const map = initMap({
        tilt: 0,
        center: [cityCenter.lng, cityCenter.lat],
        zoom: 5,
        style: purpleStyle,
      });
      console.log(BMapGL,'BMapGL')
    },
  },
  mounted() {
    function loadScript(url) {
      return new Promise((res, rej) => {
        const script = document.createElement("script");
        script.src = url;
        script.type = "text/javascript";
        document.body.appendChild(script);
        script.onload = () => {
          console.log("loader");
          res();
        };
      });
    }
    const arr = [
      "https://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxx",
      "https://mapv.baidu.com/gl/examples/static/common.js",
      "https://mapv.baidu.com/build/mapv.js",
      "https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js",
      "https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js",
    ];
    const scriptList = [];
    for (let i of arr) {
      scriptList.push(loadScript(i));
    }
    // console.log('111')
    Promise.all(scriptList).then((res) => {
      // console.log('111')
      // debugger
      console.log(BMapGL,'BMapGL')
      this.init();
    });
  },
};
</script>

写回答

2回答

hy_wang

提问者

2020-09-02

<template>
  <div id="map_container" style="height:600px;width:600px"></div>
</template>
<script>
import { loadScript } from "./map";
export default {
  methods: {
    init() {
      const cityCenter = mapv.utilCityCenter.getCenterByCityName("北京");
      const map = initMap({
        tilt: 0,
        center: [cityCenter.lng, cityCenter.lat],
        zoom: 5,
        style: purpleStyle,
      });
      console.log(BMapGL, "BMapGL");
    },
  },
  async mounted() {
    const arr = [
      "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YFAdbu6BZyaxp8q98udayv2r5Fv1txqM&callback=initialize",
      "https://mapv.baidu.com/gl/examples/static/common.js",
      "https://mapv.baidu.com/build/mapv.js",
      "https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js",
      "https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js",
    ];
    const loadList = [];
    for (let i of arr) {
      loadList.push(loadScript(i));
    }
    Promise.all(loadList).then((res) => {
      console.log(res);
      this.init();
    });
  },
};
</script>
<style scoped>
#map_container {
  height: 600px;
  width: 600px;
}
</style>

去掉callback就会报错

```

https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YFAdbu6BZyaxp8q98udayv2r5Fv1txqM&callback=initialize

如果变成

https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YFAdbu6BZyaxp8q98udayv2r5Fv1txqM

就会报错莫名其妙啊。。

```

hy_wang

扬_灵

不是的，老师我意思是我其实并没有用到这个callback，只是在url上加一个callback的参数就会正常。如果取消callback的参数就会报错。但是每次强刷就会出问题，我估计有可能是异步Promise执行顺序的问题。我在检查下，谢谢老师~

2020-09-02

共2条回复

扬_灵

2020-09-01

同学你好，你可以先新建一个map.js,当需要使用的时候通过导入的方式在页面中调用，你可以参考一下这篇文档中的写法，https://www.jianshu.com/p/8a8d71b7b054 ，如果不能解决你的问题，可以继续追问。

hy_wang

扬_灵

请问下老师，很奇怪。https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YFAdbu6BZyaxp8q98udayv2r5Fv1txqM&callback=initialize，当我在url上加上callback就好了，去掉就会找不到BMapGL。请问这是为什么，完全没有道理啊。，。

2020-09-02

共4条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1481 学习 · 1027 问题

查看课程

相似问题

bmap问题

回答 1

<ve-bmap>关于事件绑定以及实现百度地图小窗

回答 2

通过styleId设置地图样式不生效

回答 3

之前的问题找不到了...怎么设置让红色圈出部分显示英文

回答 1

关于vuex问题

回答 2

打开慕课网App查看更多内容