乾坤框架子系統(tǒng)調(diào)用百度地圖，使用vue-baidu-map組件只有衛(wèi)星和普通模式，沒法實(shí)現(xiàn)三維地圖，所以只能改為原始的加載百度地圖的api，這里最好使用懶加載方式，創(chuàng)建一個(gè)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 = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
}

頁(yè)面引用import { BMPGL } from "@/api/map/bmapGL.js";

方法調(diào)用

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 傳入密鑰獲取地圖回調(diào)。
          BMPGL(this.ak).then((BMapGL) => {
              // 創(chuàng)建地圖實(shí)例
              let map = new BMapGL.Map("threeDMap");
              // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
              map.centerAndZoom({lng:this.center.lng,lat:this.center.lat}, 19);
              //開啟鼠標(biāo)滾輪縮放
              map.enableScrollWheelZoom(true);
              //方向
              map.setHeading(64.5);
              //傾斜角度
              map.setTilt(73)
              //設(shè)置天空顏色
              map.setDisplayOptions({
                  skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
              })
              //地圖加載完成事件
              map.addEventListener('tilesloaded', function () {
                  console.log('地圖加載完成！')
              });
              // 保存數(shù)據(jù)
              this.myMap = map;
          })
          .catch((err) => {
              console.log('加載三維地圖錯(cuò)誤',err);
          });
        },

如此在子應(yīng)用中就能夠正常顯示百度三維地圖。

但是發(fā)布后在系統(tǒng)中測(cè)試卻看不到地圖，一篇空白，調(diào)試發(fā)現(xiàn)<di id="threeDMap"></div>中竟然是空的，啥也沒有。

網(wǎng)上查找說(shuō)是系統(tǒng)中調(diào)用地圖api時(shí)，BMPGL.js中window.init()的window已經(jīng)不是子框架中的window了，網(wǎng)絡(luò)中api雖然調(diào)用了，但返回的window對(duì)象中根本沒有BMPGL對(duì)象。init3DMap也根本沒有作用，連catch都進(jìn)不去。

后來(lái)看到帖子說(shuō)可以把主框架的window傳到子框架中，在BMPGL.js中使用主框架的window來(lái)初始化，但看到傳對(duì)象的步驟太過復(fù)雜，勸退了。

上一個(gè)帖子中百度編輯器中跨端處理的經(jīng)驗(yàn)，可以借鑒。

這里先在主框架中調(diào)用BMPGL.js，然后在主框架main.js中初始化全局BMPGL

import { BMPGL } from "@/api/map/bmapGL"

?設(shè)置全局對(duì)象

window.BMPGL = BMPGL

在子框架中做判斷這里在init3DMap方法就只拿部分代碼修改如下

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 傳入密鑰獲取地圖回調(diào)。
          //判斷是否在框架系統(tǒng)中
          if(window.__POWERED_BY_QIANKUN__){
            my_BMPGL = window.BMPGL;
          }
          else{
            my_BMPGL = BMPGL
          }
          my_BMPGL(this.ak).then((BMapGL) => {
            console.log('三維地圖初始化ok');
            ///......這里跟上面一樣......
          }
}

這樣就能正常初始化出三維地圖啦。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-688053.html

到了這里，關(guān)于乾坤框架中子系統(tǒng)使用百度地圖三維地圖無(wú)法顯示的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！