请使用vue3.2 实现高德地图，点击列表的某一项时，地图上的点显示图标

在Vue3.2中，我们可以使用`@vue/cli`创建一个新的项目，并结合高德地图API来实现在地图上展示自定义图标的功能。以下是一个简化的步骤：

1. **安装依赖**:
首先，确保已经安装了Vue CLI和Element Plus库（用于UI组件），如果还没有，运行：

   npm install -g @vue/cli
   vue create your-project-name
   cd your-project-name
   vue add element-plus

2. **引入高德地图API**:
官方文档通常提供CDN链接，例如：

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

替换 `YOUR_API_KEY` 为你的高德地图API key。

3. **在组件中使用地图**:
创建一个Map.vue文件，导入并初始化地图实例：

   <template>
     <div ref="mapContainer" style="height: 100%; width: 100%;"></div>
   </template>

   <script>
   import { defineComponent } from 'vue';
   import AMap from '@amap/api-js';

   export default defineComponent({
     setup() {
       const map = reactive(new AMap.Map('mapContainer', {
         zoom: 10,
         center: [116.39, 39.9]
       }));

       return { map };
     },
   });
   </script>

4. **处理点击事件**:
使用`<el-button>`或其他按钮组件绑定一个点击事件，然后在事件处理器中更新地图标记：

   <el-button v-for="(item, index) in items" :key="index" @click="showMarker(item)">
     点击{{ item.name }}
   </el-button>

   <AMap.Marker v-for="marker in markers" :position="marker.position" :iconUrl="marker.iconUrl">
   </AMap.Marker>

在`methods`中添加对应的方法：

   methods: {
     showMarker(item) {
       this.markers.forEach((marker) => marker.setMap(null)); // 清除所有已存在的标记

       // 创建新的标记，位置和图标URL来自item
       const newMarker = new AMap.Marker({
         position: item.position,
         iconUrl: item.iconUrl,
       });

       newMarker.setMap(this.map); // 将标记添加到地图上
     }
   },
   data() {
     return {
       items: ...yourItemsList, // 包含经纬度和图标URL的数据数组
       markers: [], // 初始化为空的标记集合
     };
   },

5. **相关问题--:**
1. 如何设置地图中心和初始缩放级别？
2. 如何动态加载地图图标？
3. 如何处理用户拖拽地图标记？