<template>
  <div>地图页面</div>
  <div ref="mapEl" style="height: 300px"></div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "vue";

const mapEl = ref<HTMLDivElement>();
const loadMap = async () => {
  const AMap = await AMapLoader.load({
    plugins: ["AMap.PlaceSearch"],
    key: "e661b00bdf2c44cccf71ef6070ef41b8",
    version: "2.0",
  });

  const map = new AMap.Map(mapEl.value, {
    WebGLParams: {
      preserveDrawingBuffer: true,
    },
    resizeEnable: true,
  });
};

onMounted(loadMap);
</script>
