关于高德地图、百度地图、腾讯地图的接入

[iYogic2]

高德地图、百度地图、腾讯地图属于第三方资源，在接入微前端时无法控制资源跨域性设置，故在接入micro-app时需要注意下以下细节

接入步骤如下：

1、确保子应用在接入微前端micro-app前，本身是可以正常跑起来的

2、接入微前端：在微前端的主应用的出口html 中，引入sdk，其中对应的地图sdk 如下：

• 高德sdk https://webapi.amap.com/maps?v=2.0&key=xxxxxx
• 腾讯sdk https://map.qq.com/api/gljs?v=1.exp&key=xxxxxx
• 百度sdk https://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxxx

3、在主应用的micro中，配置插件，书写忽略文件【目的：忽略子应用中直接获取地图相关js 文件时的跨域等问题，将资源提升到到主应用中加载声明】，各种地图插件配置如下：

• 腾讯地图：

    // SDK
    const MAPS_ARR_SDK = [  
       // 腾讯MAP_SDK
      '//map.qq.com/api/gljs'
    ];
    
    // JSONP
    const MAPS_ARR_JSONP = [
      // 腾讯MAP
      'apikey.map.qq.com',
      'confinfo.map.qq.com',
      'overseactrl.map.qq.com'
    ];
    
    /**
     * 如果函数返回 `true` 则忽略 script 和 link 标签的创建
     * @param {string} url
     * @returns boolean
     */
    function MapExcludeCheckerHandler(url: string): boolean {
      return MAPS_ARR_SDK.some((item) => url.includes(item));
    }
    
    /**
     * 如果函数返回 `true` ，则 micro-app 不会处理它，元素将原封不动进行渲染
     * @param {string} url
     * @returns boolean
     */
    function MapIgnoreCheckerHandler(url: string): boolean {
      return [...MAPS_ARR_SDK, ...MAPS_ARR_JSONP].some((item) => url.includes(item));
    }
    
    const microPluginMap = {
      // 可选，如果函数返回 `true` 则忽略 script 和 link 标签的创建
      excludeChecker: MapExcludeCheckerHandler,
      // 可选，如果函数返回 `true` ，则 micro-app 不会处理它，元素将原封不动进行渲染
      ignoreChecker: MapIgnoreCheckerHandler
    };
    

    // 设置为全局插件，作用于所有子应用
    microApp.start({
      plugins: {
        global: [microPluginMap],
      }
    })
    // 或者设置为某个子应用的插件，只作用于当前子应用
    microApp.start({
      plugins: {
        modules: {
          'appName': [microPluginMap],
        }
      }
    })

• 百度地图

    // SDK
    const MAPS_ARR_SDK = [  
         // 百度MAP_SDK
        '//api.map.baidu.com',
    ];
    
    // JSONP
    const MAPS_ARR_JSONP = [
         // 百度MAP
        'map.baidu.com',
        'dlswbr.baidu.com',
        'hm.baidu.com',
        'maponline0.bdimg.com',
    ];
    
    /**
     * 如果函数返回 `true` 则忽略 script 和 link 标签的创建
     * @param {string} url
     * @returns boolean
     */
    function MapExcludeCheckerHandler(url: string): boolean {
      return MAPS_ARR_SDK.some((item) => url.includes(item));
    }
    
    /**
     * 如果函数返回 `true` ，则 micro-app 不会处理它，元素将原封不动进行渲染
     * @param {string} url
     * @returns boolean
     */
    function MapIgnoreCheckerHandler(url: string): boolean {
      return [...MAPS_ARR_SDK, ...MAPS_ARR_JSONP].some((item) => url.includes(item));
    }
    
    const microPluginMap = {
      // 可选，如果函数返回 `true` 则忽略 script 和 link 标签的创建
      excludeChecker: MapExcludeCheckerHandler,
      // 可选，如果函数返回 `true` ，则 micro-app 不会处理它，元素将原封不动进行渲染
      ignoreChecker: MapIgnoreCheckerHandler
    };
    

    // 设置为全局插件，作用于所有子应用
    microApp.start({
      plugins: {
        global: [microPluginMap],
      }
    })
    // 或者设置为某个子应用的插件，只作用于当前子应用
    microApp.start({
      plugins: {
        modules: {
          'appName': [microPluginMap],
        }
      }
    })

• 高德地图：高德地图的不存在跨域问题，可以不用进行任何调整操作

4、发展：目前插件正在审核发版，稍后会发布插件，提高使用方的地图接入效率

[fkc-alt]

按照目前操作，子应用直接window.TMap还是会报错TypeError: Cannot read properties of undefined (reading 'id')

[fkc-alt]

目前问题已解决~

[gaochunchao]

子应用要怎么引入主应用的插件呀？一直都没有找到实例，都块要放弃了

[xiangxinji]

这个应该不支持 GL 版本的百度地图吧， 我看 GL版本的使用了 document.write 两个静态资源， 并且在其中一个静态资源中会执行并加载很多文件，其中文件都会报错 BMapGL 为空， 因为执行环境不一样

[YFAnt]

我也遇到了这个问题， 请问如何解决呢，引入百度地图还会有这个报错