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

无人知晓的浪潮

vue引入BMapGL is not defined

在项目src下添加bmp.js

内容如下：（ak是密钥）

1. // bmp.js
   
2. export function BMPGL(ak) {
   
3.   return new Promise(function(resolve, reject) {
   
4.     window.init = function() {
   
5.       // eslint-disable-next-line
   
6.       resolve(BMapGL)
   
7.     }
   
8.     const script = document.createElement('script')
   
9.     script.type = 'text/javascript'
   
10.     script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
    
11.     script.onerror = reject
    
12.     document.head.appendChild(script)
    
13.   })
    
14. }

复制代码

在要用到BMapGL的vue文件中导入

1. <template>
   
2.   <div class="home">
   
3.   <!--创建地图容器-->
   
4.     <div id="admap" class="allmap"></div>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. import { BMPGL } from "@/bmpgl.js"
   
10. export default {
    
11.   name: "home",
    
12.   data() {
    
13.     return {
    
14.       ak: "XXXXXXXXX", // 百度的地图密钥
    
15.       myMap: null
    
16.     };
    
17.   },
    
18.   mounted() {
    
19.     this.initMap()
    
20.   },
    
21.   methods: {
    
22.     initMap() {
    
23.       // 传入密钥获取地图回调。
    
24.       BMPGL(this.ak).then((BMapGL) => {
    
25.         // 创建地图实例
    
26.         let map = new BMapGL.Map("admap");
    
27.         // 创建点坐标 axios => res 获取的初始化定位坐标
    
28.         let point = new BMapGL.Point(114.031761, 22.542826)
    
29.         // 初始化地图，设置中心点坐标和地图级别
    
30.         map.centerAndZoom(point, 19)
    
31.         //开启鼠标滚轮缩放
    
32.         map.enableScrollWheelZoom(true)
    
33.         map.setHeading(64.5)
    
34.         //map.setTilt(73)
    
35.         // 保存数据
    
36.         // this.myMap = map
    
37.       })
    
38.       .catch((err)=>{
    
39.         console.log(err)
    
40.       })
    
41.     },
    
42.   }
    
43. };
    
44. </script>
    
45. <style lang="scss" scoped>
    
46. .admap{
    
47.   width: 100%;
    
48.   height: 100vh;
    
49.   position: relative;
    
50.   z-index: 1;
    
51. }
    
52. </style>

复制代码

完美解决啦！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/328983iv7.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！