更新

src/components/map/MapContainer.vue

@@ -8,7 +8,8 @@ import { shallowRef } from "@vue/reactivity";
 
 const map = shallowRef(null);
 let AMap: any = null;
-let marker: any = null;
+let markerList: Array<any> = [];
+let m_index: Number = 0;
 
 const initMap = async () => {
   const loader = AMapLoader.load({
@@ -24,21 +25,38 @@ const initMap = async () => {
 
   map.value.on("click", (e: any) => {
     console.log("点击", e);
-    if (marker) return;
+    if (m_index >= 3) return;
+
+    // 自定义 Marker 的图标
+    var customIcon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 图标图片
+      imageSize: new AMap.Size(26, 26), // 图标图片尺寸
+      imageOffset: new AMap.Pixel(0, 0), // 图标图片偏移量
+      label: {
+        content: "起", // 文字内容
+        offset: new AMap.Pixel(-100, -100), // 文字相对于图标的偏移量
+      },
+    });
 
     // 创建标记并添加到地图
-    marker = new AMap.Marker({
+    let marker = new AMap.Marker({
       position: e.lnglat,
       offset: new AMap.Pixel(-10, -10),
       title: "位置",
+      icon: customIcon,
+      // content: "起",
     });
     map.value.add(marker);
+    // markerList.push(marker);
+    m_index++;
 
     // 添加标记点击事件监听器
     marker.on("click", (event: any) => {
       console.log("点击了标记点", event);
       // 在这里可以进行其他自定义逻辑操作
       map.value.remove(marker);
+      m_index--;
       marker = null;
     });
   });

src/views/task_template/map.vue

@@ -15,10 +15,14 @@
             placeholder="请输入要搜索的地址"
           />
           <el-button type="primary">搜索</el-button>
+          <el-button>重置</el-button>
         </el-form-item>
         <el-form-item label="地图">
           <MapContainer></MapContainer>
         </el-form-item>
+        <el-form-item label="起点">
+          <input />
+        </el-form-item>
       </el-form>
     </popup>
   </div>