From 39ee686c6678a4a677ad695d8cef8c0a0ff7764e Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 17 Aug 2023 12:08:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/map/MapContainer.vue | 50 ++++++++++++++++++----------
src/views/task_template/edit.vue | 6 ++--
src/views/task_template/index.vue | 10 ++++--
src/views/task_template/list_two.vue | 10 ++++--
src/views/task_template/map.vue | 5 ++-
5 files changed, 54 insertions(+), 27 deletions(-)
diff --git a/src/components/map/MapContainer.vue b/src/components/map/MapContainer.vue
index 6bc2796..7048a5e 100644
--- a/src/components/map/MapContainer.vue
+++ b/src/components/map/MapContainer.vue
@@ -7,25 +7,41 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
const map = shallowRef(null);
+let AMap: any = null;
+let marker: any = null;
-const initMap = () => {
- AMapLoader.load({
- key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
- version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
- plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
- })
- .then((AMap) => {
- map.value = new AMap.Map("container", {
- //设置地图容器id
- viewMode: "2D", //是否为3D地图模式
- zoom: 10, //初始化地图级别
- center: [105.602725, 37.076636], //初始化地图中心点位置
- });
- })
- .catch((e) => {
- console.log("地图错误", e);
- ElMessage.error("未知错误");
+const initMap = async () => {
+ const loader = AMapLoader.load({
+ key: "4f8f55618010007147aab96fc72bb408",
+ version: "2.0",
+ });
+
+ AMap = await loader;
+
+ map.value = new AMap.Map("container", {
+ zoom: 13,
+ });
+
+ map.value.on("click", (e: any) => {
+ console.log("点击", e);
+ if (marker) return;
+
+ // 创建标记并添加到地图
+ marker = new AMap.Marker({
+ position: e.lnglat,
+ offset: new AMap.Pixel(-10, -10),
+ title: "位置",
});
+ map.value.add(marker);
+
+ // 添加标记点击事件监听器
+ marker.on("click", (event: any) => {
+ console.log("点击了标记点", event);
+ // 在这里可以进行其他自定义逻辑操作
+ map.value.remove(marker);
+ marker = null;
+ });
+ });
};
onMounted(() => {
diff --git a/src/views/task_template/edit.vue b/src/views/task_template/edit.vue
index a2bc945..9cccaed 100644
--- a/src/views/task_template/edit.vue
+++ b/src/views/task_template/edit.vue
@@ -14,11 +14,11 @@
label-width="90px"
:rules="formRules"
>
- <el-form-item label="主题" prop="title">
+ <el-form-item label="任务名称" prop="title">
<el-input
v-model="formData.title"
clearable
- placeholder="请输入主题"
+ placeholder="请输入任务名称"
/>
</el-form-item>
<el-form-item label="阶段类型" prop="types">
@@ -185,7 +185,7 @@ const formRules = reactive<any>({
title: [
{
required: true,
- message: "请输入主题",
+ message: "请输入任务名称",
trigger: ["blur"],
},
],
diff --git a/src/views/task_template/index.vue b/src/views/task_template/index.vue
index 75f2176..ef4eeea 100644
--- a/src/views/task_template/index.vue
+++ b/src/views/task_template/index.vue
@@ -2,12 +2,12 @@
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px] formtabel" :model="queryParams" inline>
- <el-form-item label-width="100px" label="主题" prop="title">
+ <el-form-item label-width="100px" label="任务名称" prop="title">
<el-input
class="w-[280px]"
v-model="queryParams.title"
clearable
- placeholder="请输入主题"
+ placeholder="请输入任务名称"
/>
</el-form-item>
<el-form-item label-width="100px" label="创建人" prop="admin_id">
@@ -97,7 +97,11 @@
prop="id"
show-overflow-tooltip
/>
- <el-table-column label="主题" prop="title" show-overflow-tooltip />
+ <el-table-column
+ label="任务名称"
+ prop="title"
+ show-overflow-tooltip
+ />
<el-table-column
label="创建人"
prop="admin_name"
diff --git a/src/views/task_template/list_two.vue b/src/views/task_template/list_two.vue
index 69f6334..2322be4 100644
--- a/src/views/task_template/list_two.vue
+++ b/src/views/task_template/list_two.vue
@@ -2,12 +2,12 @@
<div>
<el-card class="!border-none mb-4" shadow="never">
<el-form class="mb-[-16px] formtabel" :model="queryParams" inline>
- <el-form-item label-width="100px" label="主题" prop="title">
+ <el-form-item label-width="100px" label="任务名称" prop="title">
<el-input
class="w-[280px]"
v-model="queryParams.title"
clearable
- placeholder="请输入主题"
+ placeholder="请输入任务名称"
/>
</el-form-item>
<el-form-item label-width="100px" label="">
@@ -21,7 +21,11 @@
<el-card class="!border-none" v-loading="pager.loading" shadow="never">
<div class="mt-4">
<el-table :data="pager.lists" @cell-click="handleSelectionChange">
- <el-table-column label="主题" prop="title" show-overflow-tooltip />
+ <el-table-column
+ label="任务名称"
+ prop="title"
+ show-overflow-tooltip
+ />
<el-table-column
label="创建人"
prop="admin_name"
diff --git a/src/views/task_template/map.vue b/src/views/task_template/map.vue
index 0868197..e8f6225 100644
--- a/src/views/task_template/map.vue
+++ b/src/views/task_template/map.vue
@@ -10,7 +10,10 @@
>
<el-form>
<el-form-item label="">
- <el-input style="width: 300px; margin-right: 16px" />
+ <el-input
+ style="width: 300px; margin-right: 16px"
+ placeholder="请输入要搜索的地址"
+ />
<el-button type="primary">搜索</el-button>
</el-form-item>
<el-form-item label="地图">