From a7c0c52ed984e5dbae736a469fdac701d1a68a7f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 29 十一月 2024 10:35:48 +0800
Subject: [PATCH] 选中改颜色
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 39 +++++++++++++++++++++++++++++++--------
1 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
index b9b795f..19d9ce3 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -19,6 +19,8 @@
import { onMounted, ref } from 'vue';
import equipPic from './img/equip.svg';
+import equipSelectPic from './img/equip-select.svg';
+
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
@@ -26,13 +28,14 @@
const containerRef = ref<HTMLDivElement>(null);
const props = defineProps(['data']);
-const emit = defineEmits(['equipClick','closeInfoWindow']);
+const emit = defineEmits(['equipClick', 'closeInfoWindow']);
const createInfoWindow = () => {
// title
// <div class="title flex-center bg-[#ca0dab] text-white py-0.5 mb-2 w-full over-ellipsis">
// 缃楁眽楸�
// </div>
- const dom = `<div class="rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 text-blue-600" style="padding: 12px">
+ const dom = `<div class="rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 relative" style="padding: 12px">
+ <span class="guanbi absolute ywifont ywicon-guanbi right-[4px] top-[-2px] font-bold text-[#c3c3c3] cursor-pointer" ></span>
<div class="space-x-4 flex w-full">
<div class="flex flex-col w-1/2 key-list">
@@ -56,20 +59,20 @@
const colsArray = props.data.cols ?? [];
const keyItemHtml = colsArray
.map((col) => {
- return `<span class="flex-items-center justify-start" style="height:${cellHeight}">${col.title ?? ''}</span>`;
+ return `<span class="flex-items-center justify-start text-gray-600" style="height:${cellHeight}">${col.title ?? ''}</span>`;
})
.join('');
const valueItemHtml = colsArray
.map((col, index) => {
- return `<span class="flex-items-center justify-end" style="height:${cellHeight}">${item[index] ?? ''}</span>`;
+ return `<span class="flex-items-center justify-end text-black" style="height:${cellHeight}">${item[index] ?? ''}</span>`;
})
.join('');
keyListDom.innerHTML = keyItemHtml;
valueListDom.innerHTML = valueItemHtml;
};
-
+let curMarkerLabel: AMap.LabelMarker;
const addMarkerLayer = () => {
const map = props.data.map;
if (map.pos_x == null && map.pos_y == null) return;
@@ -90,6 +93,7 @@
icon: {
url: equipPic,
size: 30,
+ selectUrl: equipSelectPic,
},
click(e, label) {
// if (!bottomBarIsShow.value) {
@@ -98,6 +102,9 @@
// if (!chartIsShow.value) {
// chartIsShow.value = true;
// }
+
+ curMarkerLabel && curMarkerLabel !== label && restoreLabel();
+ curMarkerLabel = label;
infoWindow.open(gaoDeMap.map, label.getPosition() as any);
const extData = label.getExtData();
emit('equipClick', extData);
@@ -117,7 +124,12 @@
};
let infoWindow: AMap.InfoWindow;
-
+const restoreLabel = () => {
+ // 鍏抽棴鎭㈠鍥剧墖
+ curMarkerLabel?.setIcon({
+ image: equipPic,
+ });
+};
onMounted(async () => {
await gaoDeMap.init({
container: containerRef.value,
@@ -139,10 +151,21 @@
anchor: 'top-left',
closeWhenClickMap: true,
});
- const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
- closeBtnDom.addEventListener('click', () => {
+ (infoWindow as any).on('close', (...a) => {
+ restoreLabel();
+ curMarkerLabel = null;
+
emit('closeInfoWindow');
});
+
+ // 鑷甫鍏抽棴鍘绘帀锛岃嚜甯﹀叧闂洃鍚� close 浼氬娆¤Е鍙� close 浜嬩欢
+ const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
+ closeBtnDom.remove();
+ const myCloseBtn = infoWindow.dom.querySelector('.guanbi');
+ myCloseBtn.addEventListener('click', () => {
+ infoWindow.close();
+ });
+
});
</script>
<style scoped lang="scss">
--
Gitblit v1.9.3