前端日常踩坑之vue使用百度地图

最近项目要求使用百度地图进行展示，网上找了一些文章照着进行npm引入但是，此时遇到第一个坑地图加载出来但是只有一个白色的div

光标移上去很明显变成了地图里面控制缩放的小手，晚上在b站学习。找到现在的百度地图已经差不多几年没有维护更新了所以视频建议大家自己引入百度地图

下面上代码

　　　　　　　　

 

         　　//此方法在页面加载的时候，会执行加载地图方法init()

　　　　　　　loadJScript(){

            var script = document.createElement("script");

            script.type = "text/javascript";

            script.src = "https://api.map.baidu.com/getscript?v=3.0&ak='你自己的ak'"

            script.onload = () =>{

                this.init();

            };

            document.body.appendChild(script);

          },

 

　　　　　　//初始化地图

　　　　　　init(){

　　　　　　　　 let BMap = window.BMap;
              //创建地图并且禁止默认点击事件
              var map = new BMap.Map("allmap",{ enableMapClick: false });
　　　　　　　　//设置标注的经纬度
              map.centerAndZoom(new BMap.Point(longitude, latitude), 8);
              map.enableScrollWheelZoom(true);
          },
　　　　
　　　　　//在mounted时候执行
　　　　　

　　　　　　　mounted(){

            this.loadJScript();

    

        　　}

 

　　　　　　//地图加载必须给元素设置一个固定的高度，我自己是获取当前浏览器的高度减去head和foot的高度给定的。这样在不同分辨率的电脑上也可以适配