更新地图选择

src/components/map/MapContainer.vue

@@ -11,15 +11,19 @@ let AMap: any = null;
 let markerList: Array<any> = [];
 let m_index: Number = 0;
 let geocoder: any = null;
-let autocomplete: any = null;
+let marker = null;
 
-const emits = defineEmits("changeMaps");
+const emits = defineEmits(["changeMaps"]);
 
 const resetMap = () => {
+  try {
     markerList = [];
-  map.value.clearMap();
+    map.value?.clearMap();
     m_index = 0;
     emits("changeMaps", markerList);
+  } catch (error) {
+    console.log(error);
+  }
 };
 
 const initMap = async () => {
@@ -32,6 +36,7 @@ const initMap = async () => {
 
   map.value = new AMap.Map("container", {
     zoom: 13,
+    viewMode: "2D",
   });
 
   AMap.plugin("AMap.Geocoder", function () {
@@ -41,49 +46,34 @@ const initMap = async () => {
     }); // 经纬度数组
   });
 
-  // // 创建 Autocomplete 实例
+  map.value.setFitView();
-  // autocomplete = new AMap.Autocomplete({
-  //   city: "全国", // 设置默认城市为全国
-  // });
 
   map.value.on("click", (e: any) => {
-    // console.log("点击", e.lnglat);
+    // if (m_index >= 1) return;
-    if (m_index >= 1) return;
+    if (m_index >= 1) {
+      map.value?.remove(marker);
+      m_index = 0;
+    }
     // 调用函数并传入经纬度
     getDistrictName(e.lnglat.lng, e.lnglat.lat, e);
 
-    // 自定义 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), // 文字相对于图标的偏移量
-      },
-    });
-
     // 创建标记并添加到地图
-    let marker = new AMap.Marker({
+    marker = new AMap.Marker({
       position: e.lnglat,
-      offset: new AMap.Pixel(-10, -10),
+      offset: new AMap.Pixel(0, 0),
       title: "位置",
-      icon: customIcon,
-      // content: "起",
     });
     map.value.add(marker);
     m_index++;
 
     // 添加标记点击事件监听器
     marker.on("click", (event: any) => {
-      console.log("删除", event);
+      // markerList = markerList.filter((item: any) => {
-      markerList = markerList.filter((item: any) => {
+      //   item[0] == marker._position.pos[0] &&
-        item[0] == marker._position.pos[0] &&
+      //     item[0] == marker._position.pos[0];
-          item[0] == marker._position.pos[0];
+      // });
-      });
+      markerList = [];
       emits("changeMaps", markerList);
-      // 在这里可以进行其他自定义逻辑操作
       map.value.remove(marker);
       m_index--;
       marker = null;
@@ -92,29 +82,34 @@ const initMap = async () => {
 };
 
 const searchMap = (address: any) => {
-  console.log(address);
+  // ElMessage.error("搜索功能开发中");
-  ElMessage.error("搜索功能开发中");
+  AMap.plugin("AMap.PlaceSearch", async function () {
-
+    try {
-  // autocomplete.search(address, function (status: any, result: any) {
+      const placeSearch = new AMap.PlaceSearch({
-  //   console.log(status, result);
+        pageSize: 5, // 单页显示结果条数
-
+        pageIndex: 1, // 页码
-  //   if (status === "complete" && result.info === "OK") {
+        city: "510500", // 兴趣点城市
-  //     // 获取提示结果
+        citylimit: true, //是否强制限制在设置的城市内搜索
-  //     var tips = result.tips;
+        map: map.value, // 展现结果的地图实例
-
+        panel: false, // 结果列表将在此容器中进行展示。
-  //     // 更新搜索结果列表或下拉菜单等
+        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-  //     // ...
+      });
-  //   }
+      AMap.Event.addListener(placeSearch, "markerClick", (e: any) => {
-  // });
+        marker ? map.value?.remove(marker) : null;
+        getDistrictName(e.event.lnglat.lng, e.event.lnglat.lat, e.event);
+      });
+      placeSearch.search(address);
+    } catch (error) {
+      ElMessage.error("没找到");
+    }
+  });
 };
 
 // 获取地区名称
 const getDistrictName = (lng: any, lat: any, e: any) => {
   geocoder.getAddress([lng, lat], function (status: any, result: any) {
     if (status === "complete" && result.info === "OK") {
-      // 解析成功，提取地区名称
+      markerList = [];
-      var district = result.regeocode.addressComponent.district;
-      // console.log(district, result.regeocode); // 输出地区名字
       markerList.push({
         lnglat: e.lnglat,
         address: result.regeocode.formattedAddress,
@@ -122,7 +117,7 @@ const getDistrictName = (lng: any, lat: any, e: any) => {
       emits("changeMaps", markerList);
     } else {
       // 解析失败
-      console.log("逆地理编码失败");
+      ElMessage.error("逆地理编码失败");
     }
   });
 };

src/views/task_template/edit.vue

@@ -111,7 +111,7 @@
           @click="changeMap(0)"
         >
           <el-input
-            placeholder="请点击上方地图选择地点"
+            placeholder="请选择起点"
             readonly
             :value="formData.extend?.origin?.address"
           />
@@ -122,7 +122,7 @@
           @click="changeMap(1)"
         >
           <el-input
-            placeholder="请点击上方地图选择地点"
+            placeholder="请选择中转点"
             readonly
             :value="formData.extend?.transfer?.address"
           />
@@ -133,7 +133,7 @@
           @click="changeMap(2)"
         >
           <el-input
-            placeholder="请点击上方地图选择地点"
+            placeholder="请选择终点"
             readonly
             :value="formData.extend?.terminus?.address"
           />

src/views/task_template/map.vue

@@ -17,7 +17,7 @@
             clearable
           />
           <el-button type="primary" @click="serach()">搜索</el-button>
-          <!-- <el-button @click="resetMap()">重置</el-button> -->
+          <el-button @click="resetMap()">重置</el-button>
         </el-form-item>
         <el-form-item label-width="80px" label="地图">
           <MapContainer ref="mapRef" @changeMaps="changeMaps"></MapContainer>
@@ -124,14 +124,16 @@ const changeMaps = (e: any) => {
 // 提交按钮
 const handleSubmit = async () => {
   // if (address.value.length < 3) return ElMessage.error("请先选择三个地点");
+  if (address.value.length < 1) return ElMessage.error("请先选择地点");
   popupRef.value?.close();
   emit("success", address.value);
 };
 
 //打开弹窗
-const open = (type = "地点") => {
+const open = async (type = "地点") => {
   title.value = "选择" + type;
   popupRef.value?.open();
+  await nextTick();
   resetMap();
 };