前端日常踩坑之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的高度給定的。這樣在不同分辨率的電腦上也可以適配