地图信息窗口显示

src/views/home/index.vue

@@ -6,10 +6,20 @@
 <script setup lang="ts">
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { ref, onMounted, reactive } from 'vue';
+import { getGroupingRunData } from '@/api/runData/index';
+import { useUserStore } from '@/store';
+const UserStore = useUserStore();
+
+const formData = reactive({
+  operationName: UserStore.userInfo.username,
+  deviceType: 'hr',
+  sysName: '',
+});
 const state = reactive({
   map: null,
   markers: [
     {
+      id:'0017',
       name: '良吉站',
       position: [103.259895, 36.741046],
     },
@@ -22,6 +32,7 @@ const state = reactive({
       position: [103.263171, 36.738818],
     },
     {
+      id:'0010',
       name: '一号站',
       position: [103.261093, 36.738017],
     },
@@ -30,22 +41,27 @@ const state = reactive({
       position: [103.262666, 36.736043],
     },
     {
+      id:'0024',
       name: '十号锅炉房',
       position: [103.259629, 36.737354],
     },
     {
+      id:'0020',
       name: '二号站',
       position: [103.258883, 36.736649],
     },
     {
+      id:'0025',
       name: '六号锅炉房',
       position: [103.258253, 36.735324],
     },
     {
+      id:'0021',
       name: '八号站',
       position: [103.265382, 36.736052],
     },
     {
+      id:'0027',
       name: '三号锅炉房',
       position: [103.261836, 36.733769],
     },
@@ -54,38 +70,47 @@ const state = reactive({
       position: [103.260856, 36.733824],
     },
     {
+      id:'0014',
       name: '十一号站',
       position: [103.260617, 36.732225],
     },
     {
+      id:'0015',
       name: '十五号站',
       position: [103.25851, 36.729362],
     },
     {
+      id:'0013',
       name: '四号站',
       position: [103.263528, 36.730173],
     },
     {
+      id:'0022',
       name: '蓝星锅炉房',
       position: [103.267519, 36.727559],
     },
     {
+      id:'0006',
       name: '西太华3站',
       position: [103.268513, 36.726115],
     },
     {
+      id:'0005',
       name: '西太华2站',
       position: [103.267139, 36.72566],
     },
     {
+      id:'0004',
       name: '西太华1站',
       position: [103.267982, 36.723996],
     },
     {
+      id:'0019',
       name: '华光广场站',
       position: [103.266893, 36.724245],
     },
     {
+      id:'0008',
       name: '亚新东区',
       position: [103.266898, 36.723067],
     },
@@ -94,22 +119,27 @@ const state = reactive({
       position: [103.266013, 36.723226],
     },
     {
+      id:'0007',
       name: '兴勇站',
       position: [103.265965, 36.721631],
     },
     {
+      id:'0009',
       name: '兆烽站',
       position: [103.267177, 36.722396],
     },
     {
+      id:'0002',
       name: '金邦站',
       position: [103.268727, 36.723063],
     },
     {
+      id:'0001',
       name: '博瑞站',
       position: [103.270846, 36.724112],
     },
     {
+      id:'0003',
       name: '世纪城站',
       position: [103.271597, 36.722516],
     },
@@ -597,10 +627,16 @@ const state = reactive({
       ],
     },
   ],
+  systemData:{}
 });
 onMounted(() => {
+  getTableList();
   initMap();
 });
+const getTableList = async () => {
+  const res = await getGroupingRunData(formData);
+  state.systemData=res.data
+};
 const initMap = () => {
   AMapLoader.reset();
   AMapLoader.load({
@@ -635,9 +671,29 @@ const initMap = () => {
         offset: new AMap.Pixel(-13, -30),
       });
       marker.setMap(GMap);
+      const id=element.id;
+      // console.log(id);
+      var contentData='<div class="info">站名：' + element.name + '</div><br/><hr/>';
+      if(typeof(id)!='undefined'){
+        state.systemData[id].forEach(data => {
+          contentData+='<div class="info">分区：' + data.sysName + '</div><br/><div class="info">阀门开度：' + data.fmkd + '</div></br><div class="info">二次供温：' + data.ecgswd + '</div><br/><div class="info">二次回温：' + data.echswd + '</div><br/><div class="info">二次供压：' + data.ecgsyl + '</div><br/><div class="info">二次回压：' + data.echsyl + '</div><br/><hr/>';
+          
+        });
+        console.log(contentData)
+        var markerInfoWindow = new AMap.InfoWindow({
+          anchor: 'top-left',
+          content: contentData,
+        });
+        marker.on('mouseover', function (e) {
+          markerInfoWindow.open(GMap, [element.position[0], element.position[1]]);
+        });
+        marker.on('mouseout', function (e) {
+          markerInfoWindow.close();
+        });
+      }
       marker.setLabel({
         offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
-        content: "<div class='info'>" + element.name + '</div>', //设置文本标注内容
+        content: '<div class="info">' + element.name + '</div>', //设置文本标注内容
         direction: 'down', //设置文本标注方位
       });
     });
@@ -667,4 +723,8 @@ const initMap = () => {
   width: 30px;
   height: 30px;
 }
+.amap-marker-label{
+  border: 2;
+  /* background-color: transparent; */
+}
 </style>