党群中心首页加上地图

src/views/modules/communityService/dqfwzx/index.vue

@@ -43,6 +43,9 @@
               >修改</el-button
             >
           </div>
+
+          <div id="centerIndexApp" class="div_map"></div>
+
           <el-table
             :data="tableData[currentIndex].matterList"
             border
@@ -151,6 +154,12 @@ import editForm from "./cpts/edit";
 import orderForm from "./cpts/order";
 import orderList from "./cpts/orderList";
 
+var map;
+var search;
+var markers;
+var infoWindowList;
+let loading; // 加载动画
+
 export default {
   components: { editForm, orderForm, orderList },
   data() {
@@ -175,12 +184,66 @@ export default {
     },
     ...mapGetters(["clientHeight"]),
   },
-  watch: {},
+  watch: {
+    currentIndex() {
+      this.setMap();
+    },
+  },
   async mounted() {
     await this.loadAgency();
-    this.getTableData();
+    await this.getTableData();
+    this.initMap();
+    this.setMap();
   },
   methods: {
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap() {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById("centerIndexApp"), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+
+      search = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: [],
+      });
+      infoWindowList = Array(10);
+    },
+
+    setMarker(lat, lng, centerName) {
+      markers.setGeometries([]);
+      markers.add([
+        {
+          id: "911",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: centerName,
+          },
+        },
+      ]);
+    },
+
+    setCenter(lat, lng) {
+      map.setCenter(new window.TMap.LatLng(lat, lng));
+    },
+
+    setMap() {
+      const { tableData, currentIndex } = this;
+      let item = tableData[currentIndex];
+      if (item) {
+        this.setCenter(item.latitude, item.longitude);
+        this.setMarker(item.latitude, item.longitude, item.centerName);
+      }
+    },
+
     handleClose() {
       this.formShow = false;
     },
@@ -347,6 +410,9 @@ export default {
       margin-bottom: 10px;
       text-align: right;
     }
+    .div_map {
+      margin-bottom: 10px;
+    }
   }
 }
 .tabs-other-info {