选中改颜色

wujingjing

2024-11-29 a7c0c52ed984e5dbae736a469fdac701d1a68a7f

 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'])
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">
@@ -51,25 +54,25 @@
const updateInfoWindow = (item) => {
   const cellHeight = '20px';
   const keyListDom = infoWindow.dom.querySelector('.key-list');
   const valueListDom = infoWindow.dom.querySelector('.value-list')
   const valueListDom = infoWindow.dom.querySelector('.value-list');

   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,9 +102,12 @@
            // 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);
            emit('equipClick', extData);
            updateInfoWindow(extData);
         },
      },
@@ -117,7 +124,12 @@
};

let infoWindow: AMap.InfoWindow;

const restoreLabel = () => {
   // 关闭恢复图片
   curMarkerLabel?.setIcon({
      image: equipPic,
   });
};
onMounted(async () => {
   await gaoDeMap.init({
      container: containerRef.value,
@@ -139,6 +151,21 @@
      anchor: 'top-left',
      closeWhenClickMap: true,
   });
   (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">