地图上项目查询

zhanghua

2025-01-16 22f9f05b3f1c452325b04f0a5ed9c5f4ad992f3b

 src/views/components/Map/index.vue

@@ -36,6 +36,7 @@
import PlusImg from "@/assets/images/plus.png";
import FullScreenImg from "@/assets/images/fullScreen.png";
import PositionImg from "@/assets/images/position.png";
var infoWin;
export default {
    data() {
        return {
@@ -172,27 +173,26 @@
        },

        getCurrentPosition() {
            if (navigator.geolocation) {
                ElMessage.warning("该功能暂未开发");
                // TODO 地图定位
                // navigator.geolocation.getCurrentPosition(function (position) {
                //   var latitude = position.coords.latitude
                //   var longitude = position.coords.longitude
                //
                //   moveTo(String(longitude), String(latitude))
                // })
            } else {
                ElMessage.warning("当前浏览器不支持定位功能");
            }
      //   if (navigator.geolocation) {
      //     ElMessage.warning("该功能暂未开发");
      //     // TODO 地图定位
      //     // navigator.geolocation.getCurrentPosition(function (position) {
      //     //   var latitude = position.coords.latitude
      //     //   var longitude = position.coords.longitude
      //     //
      //     //   moveTo(String(longitude), String(latitude))
      //     // })
      //   } else {
      //     ElMessage.warning("当前浏览器不支持定位功能");
      //   }
        },

        moveTo(lon, lat) {
            this.map && this.map.panTo(new T.LngLat(lon, lat));
        },

        // 默认的点标记
        makeDefaultMask(mapInfo) {
            const { name, lon, lat } = mapInfo
      const { name, lon, lat } = mapInfo;
            const option = {
                text: name,
                offset: [-35, -45],
@@ -261,14 +261,12 @@
          ${row.projectName ?? "暂无数据"}
        </div>
        <div class='close-btn close-btn-${random}'>
          ×
        </div>
      </div>
      <div class="detail-info">
        <span class="truncate-content">总投资：${row.totalMoney ?? "暂无数据"
                    }</span>
        <span class="truncate-content">总投资：${row.totalMoney || ""}</span>
        <span class="truncate-content">
          项目状态：
          项目状态：${this.showProjectStatusStr(row.projectStatus)}
        </span>
         <span class="truncate-content">
          项目地址：${row.projectAddr ?? "暂无数据"}
@@ -281,22 +279,46 @@
    </div>`;
            }
        },
    showProjectStatusStr(status) {
      switch (status) {
        case "1":
          return "储备项目";
        case "2":
          return "前期项目";
        case "3":
          return "实施项目";
        case "4":
          return "竣工项目";
        case "5":
          return "异常项目";

        default:
          return "异常项目";
      }
    },
        // 唯一标识
        getUniqueId() {
            return Math.random().toString(36).substr(2) + Date.now();
        },

        markerMouseover(_e, infoWin, info, random) {
    markerMouseover(_e, info, random, markerOptions) {
      if (infoWin) this.map.removeOverLay(infoWin);
            // 点位标记移入显示不同内容
            if (this.$props.isShowControl) {
        infoWin = new T.InfoWindow();
                infoWin.setContent(this.generateContent(info, random));
                const contentWrapper = document.querySelector(
                    ".tdt-infowindow-content-wrapper"
                );
                if (contentWrapper) {
                    contentWrapper.style.opacity = "1";
                }
        infoWin.setLngLat(_e.lnglat);
        // 向地图上添加信息窗口
        // if (this.$props.mapType) {
        this.map && this.map.addOverLay(infoWin);
        // }

        // const contentWrapper = document.querySelector(
        //   ".tdt-infowindow-content-wrapper"
        // );
        // if (contentWrapper) {
        //   contentWrapper.style.opacity = "1";
        // }
                // 查找到那个info 界面
                // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
                // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
@@ -305,26 +327,28 @@
            }
        },

        markerMouseout(_e, infoWin) {
            infoWin.setContent(this.generateContent());
            const contentWrapper = document.querySelector(
                ".tdt-infowindow-content-wrapper"
            );
            if (contentWrapper) {
                contentWrapper.style.opacity = "0";
            }
    markerMouseout(_e) {
      // infoWin.setContent(this.generateContent());
      // const contentWrapper = document.querySelector(
      //   ".tdt-infowindow-content-wrapper"
      // );
      // if (contentWrapper) {
      //   contentWrapper.style.opacity = "0";
      // }
      // this.map.removeOverLay(infoWin);
        },

        // 打标记
        makeMask(lon, lat, options) {

      if (lon && lat) {
            const { markerOptions, labelOptions } = options;
            console.log("options", markerOptions, labelOptions);

            const icon = new T.Icon({
                iconUrl: Location,
                iconSize: new T.Point(19, 27),
                iconAnchor: new T.Point(10, 25),
            });

            var marker = new T.Marker(new T.LngLat(lon, lat), {
                icon,
                id: markerOptions?.id,
@@ -345,47 +369,67 @@
                this.map && this.map.addOverLay(label);
            }
            markerOptions?.markerClick &&
                this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
          this.addEvent(marker, "click", (e) =>
            markerOptions.markerClick(label, e)
          );
            labelOptions?.labelClick &&
                this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));

            const lnglat = new T.LngLat(lon, lat);
            const infoWin = new T.InfoWindow(this.generateContent(), {
                id: markerOptions?.id,
                offset: new T.Point(0, -15),
                closeButton: false,
            });

            infoWin.setLngLat(lnglat);
            // 向地图上添加信息窗口
            if (this.$props.mapType) {
                this.map && this.map.addOverLay(infoWin);
            }
          this.addEvent(label, "click", (e) =>
            labelOptions.labelClick(label, e)
          );

            this.addEvent(marker, "mouseover", (e) =>
                this.markerMouseover(e, infoWin, labelOptions, this.getUniqueId())
          this.markerMouseover(e, options, this.getUniqueId(), markerOptions)
            );
            this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e, infoWin));
        this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e));
      }
        },

        // 标记所有点
        makeAllMask(mapList) {
      // 清除之前的标记
      this.map && this.map.clearOverLays();
      var minX = mapList[0].longitude;
      var maxX = mapList[0].longitude;
      var minY = mapList[0].latitude;
      var maxY = mapList[0].latitude;
            var _this = this;
            this.mapList.map((item) => {
      mapList.map((item) => {
                const config = {
                    markerOptions: {
                        id: item.id,
                        markerClick: _this.markerClick,
            //  markerClick: _this.markerClick,
                    },
                    labelOptions: {
                        text: item.name,
            text: item.projectName,
                        offset: [-45, -45],
                        id: item.id,
                        markerClick: _this.labelClick,
            //   markerClick: _this.labelClick,
                    },
          projectName: item.projectName,
          totalMoney: item.yearInvestAmount
            ? item.yearInvestAmount + "元"
            : "暂无数据",
          projectAddr: item.projectAddress,
          projectStatus: item.usedStatus,
                };
                _this.makeMask(item.lon, item.lat, config);
        _this.makeMask(item.longitude, item.latitude, config);
        if (item.longitude && item.longitude > maxX) {
          maxX = item.longitude;
        }
        if (item.longitude && item.longitude < minX) {
          minX = item.longitude;
        }
        if (item.latitude && item.latitude > maxY) {
          maxY = item.latitude;
        }
        if (item.latitude && item.latitude < minY) {
          minY = item.latitude;
        }
            });
      this.moveTo(
        (parseFloat(maxX) + parseFloat(minX)) / 2,
        (parseFloat(maxY) + parseFloat(minY)) / 2
      );
        },

        // 通用添加事件的方法
@@ -418,7 +462,7 @@

        // label点击事件
        labelClick(currentLabel, e) {
            console.log("触发点击事件")
      console.log("触发点击事件");
            const id = e.target.options.id;
            this.currentLabelStyleChange(currentLabel);
            this.getReverseGeocode(e).then((addr) => {
@@ -455,7 +499,7 @@
    },
  beforeDestroy() {
    this.map = null;
  }
  },
};

// const emits = defineEmits<{
@@ -580,10 +624,10 @@
//}

.tdt-infowindow-tip-container {
    opacity: 0;
  opacity: 1;
}

.tdt-infowindow-content-wrapper {
    opacity: 0;
  opacity: 1;
}
</style>