<template>
  <div>
    <div id="map"></div>
  </div>
</template>

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

const map = ref(null);

onMounted(() => {
  AMapLoader.load({
    key: '30d3d8448efd68cb0b284549fd41adcf',
    version: '2.0',
    plugins: ['AMap.PlaceSearch']
  }).then((AMap) => {
    map.value = new AMap.Map('map', {
      zoom: 10,
      center: [110.919229,21.659751] // 茂名市
    });


  });
});

</script>

<style scoped>
#map {
  width: 100%;
  height: 400px; /* 根据需要调整地图高度 */
}
</style>
