From f65eb0dfefd593058abaf51404a7472677c4473e Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 20 五月 2024 16:54:40 +0800
Subject: [PATCH] 地图层级

---
 src/pages/territory/territory.vue |   43 ++++++++++++++++++++++++-------------------
 1 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index 1252f05..6221934 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -4,6 +4,7 @@
     <headNav
       :idIndex="idIndex"
       text="涓尰鍦板煙鍖昏氨"
+      style="z-index:999"
     />
     <view
       class="flex flex-center"
@@ -165,13 +166,11 @@
         type="text"
       >鏌ョ湅鏇村>></el-button>
     </el-card>
-    <!-- echarts鍦板浘 -->
-    <!-- <view id="main" style="width: 100vw; position: relative"></view> -->
     <div id="map"></div>
     <!-- 鏈濅唬 -->
     <view
       class="flex flex-center"
-      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
+      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
     >
       <ul class="flex">
         <li
@@ -404,18 +403,10 @@
     showCard(info) {
       console.log(info);
       console.log(this.markerList);
-      const item = this.markerList.find((f) => f.id == info.id);
-      console.log(item, "12312");
-      this.currentMark = {
-        name: item?.WEAK_NAME[0]?.content1,
-        nikeName: item?.ALIAS[0]?.content2,
-        nativePlace: item?.content1,
-        barnch: item?.MEDICAL_BRANCH[0]?.content1,
-        medical: item?.MEDICAL_EXPERTISE[0]?.content1,
-      };
-      console.log(this.currentMark);
       console.log(this.map);
-      this.isEchTrue = true;
+      const item = this.markerList.find((f) => f.id == info.id);
+      var latlng = L.latLng(item.yCoord, item.xCoord);
+      this.map.setView(latlng, 10);
     },
     getDataList() {
       getRetrieval({ keyword: this.keyword, dynasty: "" }).then((res) => {
@@ -443,14 +434,13 @@
           id: item.id,
         }));
         this.markerList = markerList;
-        console.log(markerList, "markerList");
       });
     },
     //鍒濆鍖栧湴鍥�
     initMap(markerList) {
       var map = L.map("map", {
-        attributionControl: false,
         preferCanvas: true,
+        attributionControl: false,
       }).setView([39.91667, 116.41667], 3);
 
       L.tileLayer
@@ -467,11 +457,20 @@
         popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗ｉ粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
       });
 
+      let htmlStr = '<p><span class="map-circle-name">';
+      ('</span><br><span class="map-circle-count">');
+      ("</span><p/>");
+      let icon = L.divIcon({
+        html: "<div class='map-circle-name'></div>",
+        iconSize: [80, 80],
+        className: "map-circle",
+      });
+      this.map = map;
       if (markerList.length) {
         for (let i = 0; i < markerList.length; i++) {
           const item = markerList[i];
           const temp_mark = L.marker([item.yCoord, item.xCoord], {
-            icon: DefaultIcon1,
+            icon: icon,
           }).addTo(map);
           temp_mark.on("click", (e) => {
             this.isEchTrue = true;
@@ -524,6 +523,12 @@
 </script>
 
 <style>
+::v-deep .map-circle-name {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #2070bc;
+}
 .pageBox {
   width: 100%;
   height: 100%;
@@ -644,10 +649,10 @@
 }
 
 #map {
-  height: 600px;
+  height: 100%;
   width: 100%;
   margin: 0 auto;
   font-size: 14px !important;
-  z-index: -1 !important;
+  z-index: 10 !important;
 }
 </style>

--
Gitblit v1.9.1