warm_man/components/MzMap/index.vue

<template>
  <map id="map" style="width:100%;height:1000rpx;" class="map" :show-location="true" :latitude="coordinate.lat"
       :longitude="coordinate.lng" @markertap="markerTap" @tap="mapTap">
  </map>
</template>

<script>
import functions from "@/utils/functions";
import {imghost} from "@/config/host";

export default {
  name: 'MzMap',
  props: {
    height: {
      type: Number,
      default: 90
    },
    mapIcon: {
      type: String,
      default: imghost+'/map-icon.png'
    },
    lat: {
      type: Number
    },
    lng: {
      type: Number
    },
    coordinates:{
      type: Object
    }
  },
  data() {
    return {
      loading: true,
      mapContext:{},
      markerIds: [],
      coordinate:{
        lat: 0,
        lng: 0,
      }
    }
  },
  onLoad() {

  },
  mounted() {
    if(this.lat && this.lng){
      this.coordinate.lat = this.lat;
      this.coordinate.lng = this.lng;
      this.initMap();
    }else{
      this.getLocal();
    }
  },
  methods: {
    getLocal() {
      let that = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          that.coordinate.lng = res.longitude;
          that.coordinate.lat = res.latitude;
          that.initMap();
        },
      });
    },
    initMap() {
      let that = this;
      this.mapContext = uni.createMapContext("map", this);

      this.mapContext.initMarkerCluster({
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 60,
        complete(res) {
          console.log('initMarkerCluster', res)
        }
      });

      this.mapContext.on("markerClusterCreate", (e) => {
        console.log("markerClusterCreate", e);
      });
      this.mapContext.moveToLocation({
        latitude: that.coordinate.lat,
        longitude: that.coordinate.lng,
      })
      this.handleMarkers();
    },
    handleMarkers() {
      let that = this;

      that.delMarkers().then((res) => {
        that.coordinates.map((item,index) => {
          that.markerIds.push(index);
          return item;
        });

        that.addMarkers();
      });
    },
    delMarkers(){
      let that = this;
      return new Promise((relove, reject) => {
        // console.log('markerIds',that.markerIds)
        console.log('coordinates',that.coordinates)
        console.log('markerIds',that.markerIds)
        if(that.markerIds){
          that.mapContext.removeMarkers({
            markerIds:that.markerIds,
            success:(res) => {
              that.markerIds = [];
              relove(res)
            }
          })
        }else{
          relove();
        }
      });
    },
    addMarkers(){
      let that = this;
      const markers = []

      let positions = that.coordinates;
      positions.forEach((p, i) => {
        markers.push(
            Object.assign({}, {
              id:i,
              iconPath: p.iconPath?p.iconPath:that.mapIcon,
              width: uni.$u.addUnit(p.width?p.width:50),
              height: uni.$u.addUnit(p.height?p.height:50),
              joinCluster: false, // 指定了该参数才会参与聚合

            }, p)
        )
      })
      console.log(markers)
      that.mapContext.addMarkers({
        markers,
        clear: false,
        complete(res) {
          that.$emit('addMarkers',res);
        }
      });
    },
    markerTap(e){
      let that = this
      let id = e.markerId;
      console.log(e)
      let coordinate = that.coordinates[id];
      this.mapContext.moveToLocation({
        latitude: coordinate.latitude,
        longitude: coordinate.longitude,
      })
      this.$emit('markerTap',e);
    },
    mapTap(e){
      this.$emit('mapTap',e)
    }
  },
  watch:{
    "coordinates": {
      handler(newVal, oldVal) {
        this.handleMarkers();
      }
    },
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>