地图格式

src/views/home/index.vue

@@ -630,8 +630,8 @@ const state = reactive({
   systemData:{}
 });
 onMounted(() => {
-  getTableList();
-  initMap();
+    initMap();
+    getTableList();
 });
 const getTableList = async () => {
   const res = await getGroupingRunData(formData);
@@ -645,9 +645,9 @@ const initMap = () => {
     plugins: ['AMap.Marker', 'AMap.ControlBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   }).then((AMap) => {
     var GMap = new AMap.Map('mapContainer', {
-      zoom: 25, //  地图显示的缩放级别
+      zoom: 18, //  地图显示的缩放级别
       viewMode: '3D',
-      center: [103.265702, 36.730781], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
+      center: [103.263469,36.730827], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
       // mapStyle: 'amap://styles/normal', //设置地图的显示样式
       resizeEnable: true, //  是否监控地图容器尺寸变化
       buildingAnimation: true, //建筑出现的动画
@@ -663,7 +663,8 @@ const initMap = () => {
       })
     );
     state.map = GMap;
-    // setInterval(() => {
+    
+      // 项目点显示
     state.markers.forEach((element) => {
       const marker = new AMap.Marker({
         icon: 'http://demo-demo12.oss-cn-beijing.aliyuncs.com/NewImage/GLF.png',
@@ -671,15 +672,26 @@ 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/>';
+      var content='<div class="info">' + element.name + '</div><br/>';
       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/>';
+          contentData+='<div class="info">分区：' + data.sysName 
+          + '</div><br/><div class="info">时间：' + data.dt
+          + '</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/>';
+
+          content+='<div class="info">分区：' + data.sysName 
+          + '</div><br/><div class="info">时间：' + data.dt
+          + '</div><br/><div class="info">阀门开度：' + data.fmkd+ '</div><br/><hr/>';
           
         });
-        console.log(contentData)
         var markerInfoWindow = new AMap.InfoWindow({
           anchor: 'top-left',
           content: contentData,
@@ -693,12 +705,13 @@ const initMap = () => {
       }
       marker.setLabel({
         offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
-        content: '<div class="info">' + element.name + '</div>', //设置文本标注内容
-        direction: 'down', //设置文本标注方位
+        content: content, //设置文本标注内容
+        direction: 'right', //设置文本标注方位
       });
     });
-    // }, 1000);
 
+
+    // 管道显示
     state.polylines.forEach((element) => {
       // console.log(element)
       const polyline = new AMap.Polyline({
@@ -725,6 +738,6 @@ const initMap = () => {
 }
 .amap-marker-label{
   border: 2;
-  /* background-color: transparent; */
+  background-color: #C0D9D9;
 }
 </style>