vue3在高德地图首次加载成功后，第二次加载容器消失，后续加载抛出map实例为空问题解决

原先加载方式为JS API 引入地图

interface HTMLScriptElement1 extends HTMLScriptElement {
  _version: string;
  _key: string;
}

export function loadAMap(
  v: string = '2.0',
  key: string = '',
  pluginStr: string = ''
) {
  return new Promise(function (resolve, reject) {
    const script = document.createElement('script') as HTMLScriptElement1;
    script.type = 'text/javascript';
    script.id = 'amap';
    script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=AMap.ControlBar,AMap.LineSearch,AMap.StationSearch,AMap.PolylineEditor,AMap.PolygonEditor,AMap.CircleEditor,AMap.AutoComplete,AMap.AutoComplete,AMap.DistrictSearch,AMap.PlaceSearch,AMap.MouseTool,${pluginStr}&callback=initAMap`;
    script.onerror = reject;
    script._version = v;
    script._key = key;
    document.head.appendChild(script);
    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

这里的加载方法在其他项目里都是正常了，这次放入微服务里运行的时候发现多次加载地图会出现各种问题，采用新的JS API 2.0 版本中的JSAPI Loader进行加载

import AMapLoader from '@amap/amap-jsapi-loader';
export function loadAMap() {
  return new Promise(function (resolve, reject) {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.AutoComplete',
        'AMap.AutoComplete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}