epmet-work-pc/src/utils/dai-map.js

import nextTick from "dai-js/tools/nextTick";

// 封装了地图相关函数，兼容天地图、腾讯地图常用api
export default function init(ele, position, params) {
  const mapType = typeof window.TMap !== "undefined" ? "qq" : "td";
  this.mapType = mapType;
  this.map = null;
  this.marker = null;
  this.markers = null;
  this.getCenter = function () {
    return {
      lat: 0,
      lng: 0,
    };
  };
  this.setCenter = function (lat, lng) {};
  this.setMarker = function (lat, lng) {};
  this.getAddress = async function (lat, lng) {};
  this.searchNearby = async function (keyword) {};
  this.on = function (eventType, fn) {};

  const QQMap = window.TMap;
  const TDMap = window.T;

  let { latitude, longitude } = position;
  if (!latitude || latitude == "" || latitude == "0") {
    latitude = 39.9088810666821;
    longitude = 116.39743841556731;
  }

  if (mapType == "qq") {
    let center = new QQMap.LatLng(latitude, longitude);
    this.map = new QQMap.Map(ele, {
      center,
      ...params,
    });

    this.markers = new QQMap.MultiMarker({
      map: this.map,
      geometries: [],
    });

    this.getCenter = function () {
      const center = this.map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      return { lat, lng };
    };

    this.setCenter = function (lat, lng) {
      this.map.setCenter(new QQMap.LatLng(lat, lng));
    };

    this.setMarker = function (lat, lng) {
      this.markers.setGeometries([]);
      this.markers.add([
        {
          id: "4",
          styleId: "marker",
          position: new QQMap.LatLng(lat, lng),
          properties: {
            title: "marker4",
          },
        },
      ]);
    };

    this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类
    this.getAddress = async function (lat, lng) {
      return new Promise((reslove) => {
        this.geocoder
          .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
          .then((result) => {
            reslove({
              msg: "success",
              data: {
                address: result.result.address,
              },
            });
          })
          .catch((error) => {
            reslove({
              msg: "failed",
              error,
            });
          });
      });
    };

    this.search = new QQMap.service.Search(this.map, { pageSize: 10 });
    this.searchNearby = async function (keyword) {
      return new Promise((reslove) => {
        this.search
          .searchNearby({
            keyword,
            radius: 1000,
            autoExtend: true,
            center: this.map.getCenter(),
          })
          .then((result) => {
            let { data } = result;
            if (Array.isArray(data) && data.length > 0) {
              const {
                location: { lat, lng, address },
              } = data[0];
              this.setCenter(lat, lng);
              this.setMarker(lat, lng);
              reslove({
                msg: "success",
                data: {
                  lng,
                  lat,
                  address,
                },
              });
            } else {
              reslove({
                msg: "failed",
                error: "未检索到相关位置坐标",
              });
            }
          })
          .catch((error) => {
            reslove({
              msg: "failed",
              error,
            });
          });
      });
    };

    this.on = function (eventType, fn) {
      this.map.on(eventType, fn);
    };
  } else {
    if (typeof ele == "string") {
      ele = document.getElementById("app");
    }
    let width = ele.offsetWidth;
    let height = ele.offsetHeight;
    if (height == 0) {
      ele.style.height = width * 0.5 + "px";
    }

    let center = new TDMap.LngLat(longitude, latitude);
    this.map = new TDMap.Map(ele, {
      center,
      ...params,
    });

    this.getCenter = function () {
      const center = this.map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      return { lat, lng };
    };

    this.setCenter = function (lat, lng) {
      this.map.panTo(new TDMap.LngLat(lng, lat));
    };

    this.setMarker = function (lat, lng) {
      let lnglat = new TDMap.LngLat(lng, lat);
      if (!this.marker) {
        this.marker = new TDMap.Marker(lnglat, {});
        this.map.addOverLay(this.marker);
      } else {
        this.marker.setLngLat(lnglat);
      }
    };

    this.geocoder = new TDMap.Geocoder(); // 新建一个正逆地址解析类
    this.getAddress = async function (lat, lng) {
      return new Promise((reslove) => {
        this.geocoder.getLocation(new TDMap.LngLat(lng, lat), (result) => {
          if (result) {
            console.log("this.geocoder.getLocation", result);
            let status = result.getStatus();
            reslove({
              msg: "success",
              data: {
                address: result.getAddress(),
              },
            });
          } else {
            reslove({
              msg: "failed",
              error: "解析失败",
            });
          }
        });
      });
    };

    this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 });
    this.searchNearby = async function (keyword) {
      return new Promise(async (reslove) => {
        this.search.setQueryType(1);
        this.search.searchNearby(keyword, this.map.getCenter(), 1000000000);

        await nextTick(1000);

        const result = this.search.getResults();
        const data = result ? result.getPois() : null;

        console.log("检索结果", data);

        if (Array.isArray(data) && data.length > 0) {
          const { lonlat, address, name } = data[0];
          const lng = lonlat.split(" ")[0];
          const lat = lonlat.split(" ")[1];
          this.setCenter(lat, lng);
          this.setMarker(lat, lng);
          reslove({
            msg: "success",
            data: {
              lng,
              lat,
              address: address + name,
            },
          });
        } else {
          reslove({
            msg: "failed",
            error: "未检索到相关位置坐标",
          });
        }
      });
    };

    this.on = function (eventType, fn) {
      if (eventType == "panend") {
        this.map.on("dragend", fn);
      } else {
        this.map.on(eventType, fn);
      }
    };
  }

  return this;
}