更新三轮车任务

src/components/map/MapContainer.vue

@@ -11,6 +11,19 @@ let AMap: any = null;
 let markerList: Array<any> = [];
 let m_index: Number = 0;
 
+const emits = defineEmits("changeMaps");
+
+const resetMap = () => {
+  markerList = [];
+  map.value.clearMap();
+  m_index = 0;
+  emits("changeMaps", markerList);
+};
+
+defineExpose({
+  resetMap,
+});
+
 const initMap = async () => {
   const loader = AMapLoader.load({
     key: "4f8f55618010007147aab96fc72bb408",
@@ -24,8 +37,36 @@ const initMap = async () => {
   });
 
   map.value.on("click", (e: any) => {
-    console.log("点击", e);
+    // console.log("点击", e.lnglat);
     if (m_index >= 3) return;
+    // 调用函数并传入经纬度
+    getDistrictName(e.lnglat.lng, e.lnglat.lat);
+
+    // 获取地区名称
+    function getDistrictName(lng, lat) {
+      AMap.plugin("AMap.Geocoder", function () {
+        var geocoder = new AMap.Geocoder({
+          radius: 10, // 逆地理编码范围，默认值：1000，单位：米
+          extensions: "all", // 返回地址描述结果时是否包含引擎内置的POI，默认值：base，可选值：base、all
+        }); // 经纬度数组
+
+        geocoder.getAddress([lng, lat], function (status, result) {
+          if (status === "complete" && result.info === "OK") {
+            // 解析成功，提取地区名称
+            var district = result.regeocode.addressComponent.district;
+            // console.log(district, result.regeocode); // 输出地区名字
+            markerList.push({
+              lnglat: e.lnglat,
+              address: result.regeocode.formattedAddress,
+            });
+            emits("changeMaps", markerList);
+          } else {
+            // 解析失败
+            console.log("逆地理编码失败");
+          }
+        });
+      });
+    }
 
     // 自定义 Marker 的图标
     var customIcon = new AMap.Icon({
@@ -48,17 +89,21 @@ const initMap = async () => {
       // content: "起",
     });
     map.value.add(marker);
-    // markerList.push(marker);
     m_index++;
 
     // 添加标记点击事件监听器
-    marker.on("click", (event: any) => {
+    // marker.on("click", (event: any) => {
-      console.log("点击了标记点", event);
+    //   console.log("删除", event);
-      // 在这里可以进行其他自定义逻辑操作
+    //   markerList = markerList.filter((item: any) => {
-      map.value.remove(marker);
+    //     item[0] == marker._position.pos[0] &&
-      m_index--;
+    //       item[0] == marker._position.pos[0];
-      marker = null;
+    //   });
-    });
+    //   emits("changeMaps", markerList);
+    //   // 在这里可以进行其他自定义逻辑操作
+    //   map.value.remove(marker);
+    //   m_index--;
+    //   marker = null;
+    // });
   });
 };
 

src/main.ts

@@ -5,6 +5,10 @@ import './permission'
 import './styles/index.scss'
 import 'virtual:svg-icons-register'
 
+window._AMapSecurityConfig = {
+    securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
+}
+
 const app = createApp(App)
 app.use(install)
 app.mount('#app')

src/views/task_template/edit.vue

@@ -105,6 +105,27 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item v-if="formData.type == 32" label="起点">
+          <el-input
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="formData.extend[0]?.address"
+          />
+        </el-form-item>
+        <el-form-item v-if="formData.type == 32" label="中转点">
+          <el-input
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="formData.extend[1]?.address"
+          />
+        </el-form-item>
+        <el-form-item v-if="formData.type == 32" label="终点">
+          <el-input
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="formData.extend[2]?.address"
+          />
+        </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio :label="1">显示</el-radio>
@@ -173,6 +194,7 @@ const formData = reactive({
   money_two: 0, // 二阶段金额
   money_three: 0, // 长期金额
   types: "", //阶段类型
+  extend: {},
 });
 
 //任务类型接口
@@ -244,12 +266,14 @@ const changeTaskType = async (e: any) => {
 };
 
 const setMap = (e: any) => {
-  console.log("选择了地图", e);
+  formData.extend = e;
+  console.log("选择了地区", formData.extend);
 };
 
 // 提交按钮
 const handleSubmit = async () => {
   await formRef.value?.validate();
+  if (formData.extend.length < 3) return ElMessage.error("请先选择三个地点");
   const data = { ...formData };
   mode.value == "edit"
     ? await apiTaskTemplateEdit(data)

src/views/task_template/map.vue

@@ -15,13 +15,34 @@
             placeholder="请输入要搜索的地址"
           />
           <el-button type="primary">搜索</el-button>
-          <el-button>重置</el-button>
+          <el-button @click="resetMap()">重置</el-button>
         </el-form-item>
-        <el-form-item label="地图">
+        <el-form-item label-width="80px" label="地图">
-          <MapContainer></MapContainer>
+          <MapContainer ref="mapRef" @changeMaps="changeMaps"></MapContainer>
         </el-form-item>
-        <el-form-item label="起点">
+        <el-form-item label-width="80px" label="起点">
-          <input />
+          <el-input
+            style="width: 350px; margin-right: 16px"
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="address[0]?.address"
+          />
+        </el-form-item>
+        <el-form-item label-width="80px" label="中转点">
+          <el-input
+            style="width: 350px; margin-right: 16px"
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="address[1]?.address"
+          />
+        </el-form-item>
+        <el-form-item label-width="80px" label="终点">
+          <el-input
+            style="width: 350px; margin-right: 16px"
+            placeholder="请点击上方地图选择地点"
+            readonly
+            :value="address[2]?.address"
+          />
         </el-form-item>
       </el-form>
     </popup>
@@ -70,23 +91,24 @@ const getDetail = async (row: Record<string, any>) => {
 };
 
 // 地图控件
-const mapShow = ref(false);
+const mapRef = ref(null);
-const mapPopupRef = ref(null);
 
-// 选择任务类型
+// 重置
-const changeTaskType = (e: any) => {
+const resetMap = () => {
-  if (e == 32) {
+  mapRef.value.resetMap();
-    mapShow.value = true; //为三轮车时
+};
-    mapPopupRef.value.open();
+
-  }
+const address = ref([]);
+const changeMaps = (e: any) => {
+  address.value = JSON.parse(JSON.stringify(e));
+  //   console.log("当前选择", e);
 };
 
 // 提交按钮
 const handleSubmit = async () => {
-  return console.log("ss");
+  if (address.value.length < 3) return ElMessage.error("请先选择三个地点");
-
   popupRef.value?.close();
-  emit("success");
+  emit("success", address.value);
 };
 
 //打开弹窗