diff --git a/src/components/map/MapContainer.vue b/src/components/map/MapContainer.vue index 2fefad0..0275e13 100644 --- a/src/components/map/MapContainer.vue +++ b/src/components/map/MapContainer.vue @@ -11,6 +11,19 @@ let AMap: any = null; let markerList: Array = []; 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) => { - console.log("点击了标记点", event); - // 在这里可以进行其他自定义逻辑操作 - map.value.remove(marker); - m_index--; - marker = null; - }); + // marker.on("click", (event: any) => { + // console.log("删除", event); + // markerList = markerList.filter((item: any) => { + // item[0] == marker._position.pos[0] && + // item[0] == marker._position.pos[0]; + // }); + // emits("changeMaps", markerList); + // // 在这里可以进行其他自定义逻辑操作 + // map.value.remove(marker); + // m_index--; + // marker = null; + // }); }); }; diff --git a/src/main.ts b/src/main.ts index 3748860..e7fed97 100644 --- a/src/main.ts +++ b/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') diff --git a/src/views/task_template/edit.vue b/src/views/task_template/edit.vue index 9cccaed..920b74a 100644 --- a/src/views/task_template/edit.vue +++ b/src/views/task_template/edit.vue @@ -105,6 +105,27 @@ /> + + + + + + + + + 显示 @@ -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) diff --git a/src/views/task_template/map.vue b/src/views/task_template/map.vue index 7b24078..c291855 100644 --- a/src/views/task_template/map.vue +++ b/src/views/task_template/map.vue @@ -15,13 +15,34 @@ placeholder="请输入要搜索的地址" /> 搜索 - 重置 + 重置 - - + + - - + + + + + + + + @@ -70,23 +91,24 @@ const getDetail = async (row: Record) => { }; // 地图控件 -const mapShow = ref(false); -const mapPopupRef = ref(null); +const mapRef = ref(null); -// 选择任务类型 -const changeTaskType = (e: any) => { - if (e == 32) { - mapShow.value = true; //为三轮车时 - mapPopupRef.value.open(); - } +// 重置 +const resetMap = () => { + mapRef.value.resetMap(); +}; + +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); }; //打开弹窗