子应用使用vue-amap报错

[zhuanghongbin]

What happens?

主应用和子应用都采用vue，子应用使用vue-amap报错:

maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:184 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'removeChild')
    at HTMLScriptElement.Fta.f.onload (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:184)
    at manualInvokeElementOnLoad (common.js?2ea0:58)
    at success (common.js?2ea0:212)
    at schedule (index.js?50b2:220)
    at eval (index.js?50b2:228)
    at new Promise (<anonymous>)
    at eval (index.js?50b2:227)

TypeError: Failed to execute 'postMessage' on 'Worker': Failed to convert value to 'object'.
    at e.Ox (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:86)
    at Object.sendMessage (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:86)
    at e.d [as yra] (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:81)
    at Object.lma (eval at Nn (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:124), <anonymous>:1:34277)
    at l (eval at Nn (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:124), <anonymous>:1:46892)
    at MockXMLHttpRequest.f.onreadystatechange (eval at Nn (maps?key=2ac731ec05dc74b577cd973c52e7a92a&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:124), <anonymous>:1:47057)
    at MockXMLHttpRequest.dispatchEvent (mock.js?96eb:8476)
    at XMLHttpRequest.handle (mock.js?96eb:8304)

最小可复现仓库

引入方式

import VueAMap from 'vue-amap'

VueAMap.initAMapApiLoader({
  key: '对应的key',
  plugin: ['AMap.PlaceSearch'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
  uiVersion: '1.0'
})

使用方式：

import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
const loadPromise = lazyAMapApiLoaderInstance.load()

loadPromise.then(() => {
      new AMap.service(['AMap.PlaceSearch'], () => {
        this.placeSearch =  new AMap.PlaceSearch()
      })
      // this.getMarkerPointList(this.markerAddres)
      // 初始化标记点
      setTimeout(() => {
        this.map = this.amapManager.getMap()
        if (this.markerPosition !== null && typeof this.markerPosition !== 'undefined' && this.markerPosition !== '') {
          console.log(this.markerPosition, 'mmmmmm')
          let position1 = this.markerPosition.split(',')[0]
          let position2 = this.markerPosition.split(',')[1].trim()
          // this.map = this.amapManager.getMap()
          // this.map && this.map.setZoomAndCenter(17, [113.91779741808773, 22.494876070482267])
          this.map && this.map.setZoomAndCenter(17, [position1, position2])
          this.markerInit = new AMap.Marker({
            position: [position1, position2]
          })
          this.map.add(this.markerInit)
        }
      }, 500)
    })

相关环境信息

• 2.5.1
• 95.0.4638.69：
• win10：

[gongshun]

高德地图 1.x 版本的确有兼容性问题，https://github.com/umijs/qiankun/issues/838#issuecomment-680791815

至于 vue-amap 使用报错，主要有两个解决办法：

1. 主应用加载 <script src="https://unpkg.com/vue-amap/dist/index.js"></script>，子应用无需引入直接使用。

2. 子应用异步加载 vue-amap，然后配合 excludeAssetFilter 逃出沙箱控制，https://qiankun.umijs.org/zh/api#startopts 。

   异步加载的方式，可以是动态插入外链的 script ，也可以是 import() 动态导入并命名 import(/* webpackChunkName: "vue-amap" */ './vue-amap')

[rule78]

如果是UI库，这样无法做按需加载呀