公用AMap

main.js里设置全局的AMapLoader.load

import AMapLoader from '@amap/amap-jsapi-loader';
function initMap(app) {
  app.config.globalProperties.$AMap = AMapLoader.load({
    key: 'xxx', // 申请好的Web端开发者Key，首次调用 load 时必填
    // version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.Scale',
      'AMap.ToolBar',
      'AMap.ControlBar',
      'AMap.Geocoder',
      'AMap.Marker',
      'AMap.CitySearch',
      'AMap.Geolocation',
      'AMap.AutoComplete',
      'AMap.InfoWindow',
    ],
    AMapUI: {
      version: '1.1',
      plugins: [],
    },
  });
}

const app = createApp(App);
initMap(app);

vue页面使用（getCurrentInstance这里虽然可以用但我在想有没有别的写法，以后可能修改

  import {  getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
 const initMap = () => {
    proxy.$AMap
      .then((val) => {
        AMap.value = val;
        map.value = new AMap.value.Map('realGisMap', {
          // mapStyle: 'amap://styles/whitesmoke',
          viewMode: '3D', //是否为3D地图模式
          zoom: 11, //初始化地图级别
          center: [113.122717, 23.028762],
        });
        //信息窗口实例
        infoWindow.value = new AMap.value.InfoWindow({
          anchor: 'bottom-center',
          content: mapContent.value,
          offset: new AMap.value.Pixel(0, 0),
        });
      })
      .catch((val) => {
        console.log(val);
      });
  };