1

YM

2024-06-05 c4b8209d92daa8c6e8ec20bdd56fecf4a95d0990

 src/pages/territory/territory.vue

@@ -56,7 +56,7 @@
        height: 3.2rem;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
        z-index: 99;
        left: 1rem;
        top: 2.2rem;
      "
@@ -76,6 +76,20 @@
        >
      </div>
      <view style="overflow: auto; height: 2.5rem">
        <div
          v-if="!loading && SearchArr.length == 0"
          style="
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.2rem;
            color: #666;
          "
        >
          暂无搜索数据
        </div>
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
@@ -209,6 +223,7 @@
export default {
  data() {
    return {
      loading: true,
      // echarts元素点击时出来的弹窗和坐标
      keyword: "",
      isEchTrue: false,
@@ -401,8 +416,21 @@
      this.map.setView(latlng, 10);
    },
    getDataList() {
      getRetrieval({ keyword: this.keyword, dynasty: this.dynasty1Color }).then(
        (res) => {
      this.SearchArr = [];
      this.loading = true;
      // 这里改成了分页的接口，需要调用多次取出所有数据

      // 问题：
      // 搜索结果不对
      // 点击地图标点出现弹框，拖动地图时应关闭弹框

      getRetrieval({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: 1,
        pageSize: 1000
      }).then((res) => {
        this.loading = false;
          if (res.object) {
            let markerList = [];
            const listData = res.object.personList;
@@ -434,12 +462,14 @@
              id: item.id
            }));
            this.markerList = markerList;
        } else {
          this.initMap([]);
          }
        }
      );
      });
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList,'markerList');
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
@@ -473,6 +503,7 @@
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          let currentClassName = "map-circle-name";
          if (item.dynastyInfo) {
          switch (item.dynastyInfo.dynastyChs) {
            case "夏":
              currentClassName = "map-circle-xia";
@@ -499,6 +530,8 @@
              currentClassName = "map-circle-ming";
              break;
          }
          }

          let icon = L.divIcon({
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],