解决qiankun微前端加载腾讯地图JSONP跨域问题

qiankun微前端框架加载腾讯地图会报jsonp请求跨域的问题,官网给的解决方案如下图所示：

image.png

然而并不能解决实际项目遇到的场景，qiankun框架加载腾讯地图api，腾讯地图本身会动态加载一些JSONP请求的js，从而导致JSONP跨域错误，加载不了地图，就很麻烦，算是qiankun框架的天生bug吧？于是我使用了曲线救国的方法来解决这个问题。
新建了一个腾讯地图的项目，使用iframe嵌套腾讯地图，使用postMessage互相通信。

image.png

1. 子应用：

这个子应用我是使用vue3来开发的，该子应用和iframe的通信方式如下：

        onMounted(async () => {
            window.addEventListener('message', (res) => {
                if (res && res.data && res.data.params && res.data.params.data) {
                    let arr = res.data.params.data.map(item => {
                        return item.title
                    })
                    state.AdForm.adPositionShop = arr.join(',')
                }
            }) 
        })

2. 腾讯地图核心的代码

因为使用到腾讯地图WebService API 的关键词输入提示的接口，需要使用jsonp请求来获取数据，这里使用vue-jsonp来发送jsonp请求。

image.png

<template>
 <div id="app">
   <div class="mapSearch">
     <el-select style="width: 300px;" @change="handleChange" v-model="keyword" multiple
         filterable remote reserve-keyword  placeholder="请输入门店"
         :remote-method="remoteMethod"
         :loading="loading">
       <el-option  v-for="item in options"  :key="item.id" :label="item.title" :value="item.id"></el-option>
     </el-select>
   </div>
   <div id="Map"></div>
 </div>
</template>

<script>
import { jsonp } from 'vue-jsonp'
export default {
  name: 'App',
  data () {
    return {
      keyword: '',
      loading: false,
      options: []
    }
  },
  methods: {
    handleChange (val) {
      window.parent.postMessage({
        cmd: 'returnHeight',
        params: {
          success: true,
          data: val
        }
      }, '*');
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.getResult(query)
      } else {
        this.options = [];
      }
    },
    initMap() {
      let center = new TMap.LatLng(30.269765,120.155342);
      //初始化地图
      new TMap.Map("Map", {
        rotation: 20, //设置地图旋转角度
        pitch:30,  //设置俯仰角度（0~45）
        zoom:12, //设置地图缩放级别
        center: center //设置地图中心点坐标
      });
    },
    getResult (query) {
      this.loading = true
      jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
        region: "杭州",
        keyword: query,
        key: "CCWBZ-LZD6S-67COM-6GWDO-*****-*****", //  创建应用的key 
        output: 'jsonp'
      }).then(res => {
        this.loading = false 
        this.options = res.data
      })
    }
  },
  mounted () {
    this.initMap()
  }
}
</script>

效果

image.png

总结

涉及到的知识点有：

1. vue调取腾讯webService API
   参考文章
2. vue页面与iframe页面通信方法
   参考文章