vben admin引入高德地图

话不多说，直接上代码，进入正题--->

<div ref="wrapRef" :style="{ height, width }">

import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '/@/hooks/web/useScript';
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=你在高德地图开放平台申请的key';

export default defineComponent({
  name: 'AMap',
  props: {
    width: {
      type: String,
      default: '50%',
    },
    height: {
      type: String,
      default: 'calc(100vh - 78px)',
    },
  },
 setup() {
 const wrapRef = ref<HTMLDivElement | null>(null);
 const { toPromise } = useScript({ src: A_MAP_URL });
async function initMap() {
      await toPromise();
      await nextTick();
      const wrapEl = unref(wrapRef);
      if (!wrapEl) return;
      const AMap = (window as any).AMap;
      const map = new AMap.Map(wrapEl, {
        zoom: 11,//值越大越接近地面
        center: [108.948024, 34.263161],//城市的经纬度
        viewMode: '3D',
      });
      var circle = new AMap.Circle({
        center: [108.94, 34.26],  // 圆心位置
        radius: 5000, // 圆半径
        fillColor: 'red',   // 圆形填充颜色
        strokeColor: '#00ffee', // 描边颜色
        strokeWeight: 2, // 描边宽度
      });
      map.add(circle);

      // 创建一个 Marker 实例：
      // var marker = new AMap.Marker({
      //   position: new AMap.LngLat(108.94, 34.26),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      //   icon: EnvironmentTwoTone,
      // });
      // 将创建的点标记添加到已有的地图实例：
      // map.add(marker);
      // 移除已创建的 marker
      // map.remove(marker);
    };
    onMounted(() => {
      initMap();  
    });
    return {
wrapRef,
}
}
)}

好了，今天就分享到这里叭，欢迎随时留言哦！