From 9894b63c471919baac5459ec4fac799be6b2ce51 Mon Sep 17 00:00:00 2001 From: weipengfei <2187978347@qq.com> Date: Fri, 18 Aug 2023 15:35:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9C=B0=E5=9B=BE=E9=80=89?= =?UTF-8?q?=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/map/MapContainer.vue | 99 ++++++++++++++--------------- src/views/task_template/edit.vue | 6 +- src/views/task_template/map.vue | 6 +- 3 files changed, 54 insertions(+), 57 deletions(-) diff --git a/src/components/map/MapContainer.vue b/src/components/map/MapContainer.vue index 7973e98..ba87110 100644 --- a/src/components/map/MapContainer.vue +++ b/src/components/map/MapContainer.vue @@ -11,15 +11,19 @@ let AMap: any = null; let markerList: Array = []; 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 = () => { - markerList = []; - map.value.clearMap(); - m_index = 0; - emits("changeMaps", markerList); + try { + markerList = []; + 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 实例 - // autocomplete = new AMap.Autocomplete({ - // city: "全国", // 设置默认城市为全国 - // }); + map.value.setFitView(); 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) => { - item[0] == marker._position.pos[0] && - item[0] == marker._position.pos[0]; - }); + // markerList = markerList.filter((item: any) => { + // 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("搜索功能开发中"); - - // autocomplete.search(address, function (status: any, result: any) { - // console.log(status, result); - - // if (status === "complete" && result.info === "OK") { - // // 获取提示结果 - // var tips = result.tips; - - // // 更新搜索结果列表或下拉菜单等 - // // ... - // } - // }); + // ElMessage.error("搜索功能开发中"); + AMap.plugin("AMap.PlaceSearch", async function () { + try { + const placeSearch = new AMap.PlaceSearch({ + pageSize: 5, // 单页显示结果条数 + pageIndex: 1, // 页码 + city: "510500", // 兴趣点城市 + citylimit: true, //是否强制限制在设置的城市内搜索 + 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") { - // 解析成功，提取地区名称 - var district = result.regeocode.addressComponent.district; - // console.log(district, result.regeocode); // 输出地区名字 + markerList = []; 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("逆地理编码失败"); } }); }; diff --git a/src/views/task_template/edit.vue b/src/views/task_template/edit.vue index 57aabca..4bba2cb 100644 --- a/src/views/task_template/edit.vue +++ b/src/views/task_template/edit.vue @@ -111,7 +111,7 @@ @click="changeMap(0)" > @@ -122,7 +122,7 @@ @click="changeMap(1)" > @@ -133,7 +133,7 @@ @click="changeMap(2)" > diff --git a/src/views/task_template/map.vue b/src/views/task_template/map.vue index ee6db7c..7ed4ee6 100644 --- a/src/views/task_template/map.vue +++ b/src/views/task_template/map.vue @@ -17,7 +17,7 @@ clearable /> 搜索 - + 重置 @@ -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(); };