1

src/views/HomeView.vue

@@ -62,16 +62,13 @@
         <div
           class="cardlist"
           v-for="(item, index) in dropdown.rmyy"
+          @click="addClickHandls(item)"
           :key="index"
         >
           <img class="imgse" :src="item.img" alt="" />
           <div class="bodys">
             <div class="bt">{{ item.fu_wu_ti_gong_dan_wei_ming_chen }}</div>
             <div class="dz">
-              <!-- <div class="tp">
-                  <img class="ims" src="../assets/home/dz.png" alt="" />
-                </div> -->
-              <!-- <div class="zl">{{ 100 }}</div> -->
               <div class="xxdz">{{ item.xiang_xi_di_zhi }}</div>
             </div>
             <div class="bq">
@@ -84,6 +81,42 @@
       </div>
     </van-popup>
   </div>
+  <van-popup
+    v-model:show="show"
+    closeable
+    round
+    :style="{ padding: '45px 10px 45px 10px', width: '90%' }"
+  >
+    <div style="width: 99%; margin: 0 auto">
+      <div style="width: 90%; height: 130px; margin: 0 auto">
+        <img
+          style="width: 100%; height: 100%; border-radius: 5px"
+          :src="showdata.tp"
+          alt=""
+        />
+      </div>
+      <div
+        style="
+          font-size: 15px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #000;
+          width: 100%;
+        "
+      >
+        <van-cell
+          title="名称"
+          :label="showdata.fu_wu_ti_gong_dan_wei_ming_chen"
+        />
+        <van-cell
+          title="单位类型"
+          :label="showdata.fu_wu_ti_gong_dan_wei_lei_xing"
+        />
+        <van-cell title="详细地址" :label="showdata.xiang_xi_di_zhi" />
+        <van-cell title="联系电话" :label="showdata.lian_xi_dian_hua" />
+      </div>
+    </div>
+  </van-popup>
 </template>
   
 <script  setup>
@@ -107,10 +140,14 @@ import img15 from "@/assets/home/yxfw.png";
 import img16 from "@/assets/home/yxfwxz.png";
 import img17 from "@/assets/home/yy.png";
 import img18 from "@/assets/home/wdwz.png";
+import img19 from "@/assets/home/xzwz.png";
+
 const kisty = ref(false);
 var map = null;
 var control = null;
 var T = window.T;
+const show = ref(false);
+const showdata = ref({});
 
 const dropdown = reactive({
   sesh: "",
@@ -128,7 +165,7 @@ const dropdown = reactive({
 
 const list = reactive({
   page: 1,
-  size: 140,
+  size: 100,
   show: true,
   index: 0,
   yxfw: [
@@ -191,9 +228,6 @@ const init = () => {
   //添加缩放平移控件
   map.addControl(control);
   control.setPosition(T_ANCHOR_TOP_RIGHT);
-
-  // var lo = new T.Geolocation();
-  // lo.getCurrentPosition(fn);
 };
 const fn = function (e) {
   var icon = new T.Icon({
@@ -202,7 +236,6 @@ const fn = function (e) {
     iconAnchor: new T.Point(28, 28),
   });
   let geocoder;
-  console.log(this.getStatus());
   if (this.getStatus() == 0) {
     map.centerAndZoom(e.lnglat, 15);
     var marker = new T.Marker(e.lnglat, { icon: icon });
@@ -218,7 +251,6 @@ const fn = function (e) {
     map.addOverLay(marker);
   }
   if (this.getStatus() == 3) {
-    console.log(this.getStatus());
     map.centerAndZoom(e.lnglat, 15);
     var marker = new T.Marker(e.lnglat, { icon: icon });
     geocoder = new T.Geocoder();
@@ -228,11 +260,8 @@ const fn = function (e) {
 };
 const searchResult = function (result) {
   if (result.getStatus() == 0) {
-    console.log(result.getAddress());
-    console.log("定位3成功信息：", result.getAddress());
   } else {
     alert(result.getMsg());
-    console.log(result.getMsg());
   }
 };
 
@@ -263,10 +292,82 @@ const yxf = () => {
     var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
       icon: icons,
     });
+    // LngLats.addEventListener("click", getinfo(item));
     map.addOverLay(LngLats);
+    addClickHandler(item, LngLats);
+  });
+};
+function addClickHandler(content, LngLats) {
+  LngLats.addEventListener("click", function (e) {
+    map.clearOverLays();
+    dropdown.rmyy.forEach((item, index) => {
+      if (item.xiang_xi_di_zhi_jing_wei_du == content.xiang_xi_di_zhi_jing_wei_du) {
+        var icons = new T.Icon({
+          iconUrl: img19,
+          iconSize: new T.Point(28, 28),
+          iconAnchor: new T.Point(28, 28),
+        });
+        let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
+        var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
+          icon: icons,
+        });
+        // LngLats.addEventListener("click", getinfo(item));
+        map.addOverLay(LngLats);
+        addClickHandler(item, LngLats);
+      } else {
+        var icons = new T.Icon({
+          iconUrl: img17,
+          iconSize: new T.Point(28, 28),
+          iconAnchor: new T.Point(28, 28),
+        });
+        let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
+        var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
+          icon: icons,
+        });
+        // LngLats.addEventListener("click", getinfo(item));
+        map.addOverLay(LngLats);
+        addClickHandler(item, LngLats);
+      }
+    });
+    show.value = true;
+    showdata.value = content;
+  });
+}
+const addClickHandls = (e) => {
+  let lest = e.xiang_xi_di_zhi_jing_wei_du.split(",");
+  map.centerAndZoom(new T.LngLat(lest[0], lest[1]), 18);
+  showdata.value = e;
+  map.clearOverLays();
+  dropdown.rmyy.forEach((item, index) => {
+    if (item.xiang_xi_di_zhi_jing_wei_du == e.xiang_xi_di_zhi_jing_wei_du) {
+      var icons = new T.Icon({
+        iconUrl: img19,
+        iconSize: new T.Point(28, 28),
+        iconAnchor: new T.Point(28, 28),
+      });
+      let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
+      var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
+        icon: icons,
+      });
+      // LngLats.addEventListener("click", getinfo(item));
+      map.addOverLay(LngLats);
+      addClickHandler(item, LngLats);
+    } else {
+      var icons = new T.Icon({
+        iconUrl: img17,
+        iconSize: new T.Point(28, 28),
+        iconAnchor: new T.Point(28, 28),
+      });
+      let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
+      var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
+        icon: icons,
+      });
+      // LngLats.addEventListener("click", getinfo(item));
+      map.addOverLay(LngLats);
+      addClickHandler(item, LngLats);
+    }
   });
 };
-
 onMounted(() => {
   init();
   columnList();
@@ -290,7 +391,6 @@ const getlist = (e) => {
     data_sorts: [],
   };
   let patle = "";
-  console.log();
   if (!e) {
     patle = list.yxfw[0].columnName;
     paly.column_id = list.yxfw[0].ids;