问题背景

最近开发一大型项目，使用qiankun 框架作为主要微前端框架，遇到使用腾讯地图api的相关功能，之前在别的单体前端项目中遇到过，心想：哎呀，这不是复制粘贴就ok么，不成想，年轻不懂事，怎么还能出现个跨域的问题，vue-jsonp不是已经引入了么，怎么还跨域？

解决方案

一顿浏览器操作，发现，这是qiankun框架子应用中运行导致的问题变相处理方案如下：

主应用中配置相关的地图使用页面，相关对腾讯地图api的调用均在主应用中操作即新增一个理由页面，如：xxx.xxx.xxx:8000/map
子应用使用iframe嵌套主应用的map页面，通过postmessage进行数据通信操作

具体实践步骤

主应用的index.html中引入腾讯地图相关js

  <!-- 腾讯地图相关 -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=your key"></script>
    <!-- 腾讯地图定位相关 -->
    <script type="text/javascript"
      src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

主应用添加vue-jsonp (此只针对vue项目处理腾讯地图跨域问题，具体细节自行百度)

yarn add vue-jsnop

主应用map路由中配置腾讯地图使用相关

//容器
<div id="mapcontainer"></div>
....

//初始化地图
initMap(lat, lng) {
      if (this.mapVal) {
        this.mapVal.destroy()
      }

      this.$nextTick(() => {
        const TMap = window.TMap
        var center = new window.TMap.LatLng(lat, lng)
        this.mapVal = new TMap.Map(document.getElementById('mapcontainer'), {
          center: center,
          zoom: 17.2,
          pitch: 43.5,
          rotation: 45,
          viewMode: '2D',
          mapStyleId: 'style1'
        })
      })
    }

//搜索数据相关
onChange(value) {
      //   console.log('onChange', value)
      this.mapList = []
      // console.log(queryString)
      const KEY = 'your key'
      const url = 'https://apis.map.qq.com/ws/place/v1/suggestion'
      const keyword = value
      jsonp(url, {
        key: KEY,
        region: '全国',
        keyword: keyword,
        output: 'jsonp'
      })
        .then(res => {
          console.log(res)
          window.parent.postMessage(
            {
              cmd: 'map',
              params: {
                success: true,
                data: res
              }
            },
            '*'
          )

        })
        .catch(err => {
          console.log(err)
        })
    },

主应用通过postmessage发送数据

window.parent.postMessage(
  {
    cmd: 'map',
    params: {
      success: true,
      data: res
    }
  },
  '*'
)

子应用中使用

<iframe id="mapPage" width="500px" height="500px" frameborder="0" src="your ip path"> </iframe>

子应用中监听数据发送及接收

window.addEventListener(
      'message',
      function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        console.log('接受到消息', event)
      },
      false
    )

相关查阅文档：
1.qiankun官方文档：qiankun.umijs.org/zh/guide
2. 地图使用相关 blog.csdn.net/weixin_4592… 上述内容如有疑问或错误，欢迎指出指正，或有更优方案也请一并提出

微前端 子应用使用腾讯地图跨域问题处理

问题背景

解决方案

具体实践步骤

微前端子应用使用腾讯地图跨域问题处理