vue3+ts使用高德地图显示上海区域，添加marker并且能点击marker

<template>
  <div id="map" style="width: 100%; height: 500px;"></div>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
 
const map = ref<AMap.Map>();
 
onMounted(() => {
  map.value = new AMap.Map('map', {
    zoom: 10,
    center: [121.4889, 31.2491] // 杭州经纬度
  });
 
  // 添加一个marker
  const marker = new AMap.Marker({
    position: new AMap.LngLat(121.4889, 31.2491),
    map: map.value
  });
 
  // 将marker添加到地图上
  marker.setMap(map.value);
 
  // 监听marker的点击事件
  AMap.event.addListener(marker, 'click', () => {
    alert('Marker被点击了！');
  });
});
</script>
 
<style>
/* 样式内容 */
</style>

在这个例子中，我们首先在模板中定义了地图容器，并在setup脚本中使用onMounted生命周期钩子进行初始化。我们创建了一个地图实例，并设置了地图的中心点和缩放级别。然后，我们创建了一个marker实例，并将其添加到地图上。最后，我们使用AMap.event.addListener为marker添加了点击事件的监听器。当用户点击marker时，会弹出一个警告框提示用户marker被点击了。