乾坤框架中子系统使用百度地图三维地图无法显示的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了乾坤框架中子系统使用百度地图三维地图无法显示的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

乾坤框架子系统调用百度地图，使用vue-baidu-map组件只有卫星和普通模式，没法实现三维地图，所以只能改为原始的加载百度地图的api，这里最好使用懒加载方式，创建一个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)
    })
}

页面引用import { BMPGL } from "@/api/map/bmapGL.js";

方法调用

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 传入密钥获取地图回调。
          BMPGL(this.ak).then((BMapGL) => {
              // 创建地图实例
              let map = new BMapGL.Map("threeDMap");
              // 初始化地图，设置中心点坐标和地图级别
              map.centerAndZoom({lng:this.center.lng,lat:this.center.lat}, 19);
              //开启鼠标滚轮缩放
              map.enableScrollWheelZoom(true);
              //方向
              map.setHeading(64.5);
              //倾斜角度
              map.setTilt(73)
              //设置天空颜色
              map.setDisplayOptions({
                  skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
              })
              //地图加载完成事件
              map.addEventListener('tilesloaded', function () {
                  console.log('地图加载完成！')
              });
              // 保存数据
              this.myMap = map;
          })
          .catch((err) => {
              console.log('加载三维地图错误',err);
          });
        },

如此在子应用中就能够正常显示百度三维地图。

但是发布后在系统中测试却看不到地图，一篇空白，调试发现<di id="threeDMap"></div>中竟然是空的，啥也没有。

网上查找说是系统中调用地图api时，BMPGL.js中window.init()的window已经不是子框架中的window了，网络中api虽然调用了，但返回的window对象中根本没有BMPGL对象。init3DMap也根本没有作用，连catch都进不去。

后来看到帖子说可以把主框架的window传到子框架中，在BMPGL.js中使用主框架的window来初始化，但看到传对象的步骤太过复杂，劝退了。

上一个帖子中百度编辑器中跨端处理的经验，可以借鉴。

这里先在主框架中调用BMPGL.js，然后在主框架main.js中初始化全局BMPGL

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

设置全局对象

window.BMPGL = BMPGL

在子框架中做判断这里在init3DMap方法就只拿部分代码修改如下

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 传入密钥获取地图回调。
          //判断是否在框架系统中
          if(window.__POWERED_BY_QIANKUN__){
            my_BMPGL = window.BMPGL;
          }
          else{
            my_BMPGL = BMPGL
          }
          my_BMPGL(this.ak).then((BMapGL) => {
            console.log('三维地图初始化ok');
            ///......这里跟上面一样......
          }
}

这样就能正常初始化出三维地图啦。文章来源地址https://www.toymoban.com/news/detail-688053.html

到了这里，关于乾坤框架中子系统使用百度地图三维地图无法显示的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！