epmet-resi-rizhao/components/mapList/index.ts

import { getLocation } from "@utils/location";
import { nextTick } from "@utils/tools";
import shuffle from "@npm/dai-mp/tools/shuffle";

const app = getApp();

Component({
  properties: {
    list: {
      type: Array,
      value: [
        // {
        //   name: '',
        //   latitude: 0,
        //   longitude: 0,
        // }
      ],
    },

    calloutDisplay: {
      type: String,
      value: "BYCLICK",
    },
  },

  data: {
    iniLoaded: false,
    mapId: "myMap",
    mapCtx: null,

    setting: {
      enable3D: true,
    },

    iniCenterPoint: {
      longitude: 0,
      latitude: 0,
    },

    includePoints: {
      padding: [50, 20, 50, 20],
      points: [],
    },

    markers: [],
  },

  lifetimes: {
    // 页面初始化
    async attached() {
      this.init();
    },
  },

  methods: {
    async init() {
      this.setData({
        mapId: "map" + shuffle("abcdefg1234567890"),
      });

      const { list } = this.properties;
      this.setData({
        list: list.filter((item) => item.longitude && item.latitude),
      });

      await this.iniMap();

      this.addMarker();
      this.setData({
        iniLoaded: true,
      });

      await nextTick();
      // let mapCtx = this.createSelectorQuery().select("#myMap");
      let mapCtx = wx.createMapContext(this.data.mapId, this);
      // console.log(mapCtx);
      if (
        this.data.includePoints.points &&
        this.data.includePoints.points.length > 0
      ) {
        mapCtx.includePoints(this.data.includePoints);
      }
      // this.setData({
      //   mapCtx,
      // });
    },

    async iniMap() {
      const { list } = this.data;
      this.setData({
        "includePoints.points": list.map((item) => {
          return {
            latitude: item.latitude,
            longitude: item.longitude,
          };
        }),
      });
      const { msg, data } = await getLocation(true);
      if (msg === "success") {
        this.setData({
          iniCenterPoint: {
            longitude: data.longitude,
            latitude: data.latitude,
          },
        });
      } else {
        this.setData({
          iniCenterPoint: {
            longitude: app.globalData.longitude,
            latitude: app.globalData.latitude,
          },
        });
      }
    },

    handleTapMarker(e) {
      console.log(e);
      const {
        detail: { markerId },
      } = e;
      this.triggerEvent("click", { index: markerId });
    },

    addMarker() {
      const { list } = this.data;

      if (!Array.isArray(list) || list.length == 0) return;

      let markers = [];

      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        markers.push({
          id: i,
          title: item.name,
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: "/assets/images/map/poi.png",
          width: 25,
          height: 28,
          alpha: 0.8,
          callout: {
            content:
              item.name.length > 19 ? item.name.substr(0, 18) + "…" : item.name,
            color: "#fff",
            bgColor: "#F37D03",
            display: this.data.calloutDisplay, //ALWAYS  "BYCLICK"
            borderRadius: 5,
            fontSize: 16,
            padding: 5,
          },
        });
      }

      this.setData({ markers });
    },
  },
});