paper-shopkeeper-app/components/qn-map/qn-map.nvue

<template>
  <!-- 使用前请使用flex包裹 -->
  <map
    id="qnMap"
    ref="qnMap"
    class="qn-map"
    :longitude="centerPoint.longitude"
    :latitude="centerPoint.latitude"
    :markers="markers"
    :show-location="true"
    :scale="scale"
    @labeltap="labeltap"
    @regionchange="regionchange"
  ></map>
</template>

<script>
export default {
  props: {
    location: {
      type: Object,
      required: false,
      default: () => ({})
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      timer: null,
      mapContext: null,
      centerPoint: {
        longitude: 113.395996,
        latitude: 23.119967
      },
      markers: [],
      selectedId: -1,
      scale: 14
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.mapContext = uni.createMapContext('qnMap', this)
    // this.mapContext.onstatuschanged = function (e) {
    //   console('change:', e)
    // }
  },
  watch: {
    // 只监听items一层变化
    items(val) {
      this.markers = val.map((item,index) => {
        return this.causeMarker(item,index)
      })
			console.log('this.marker:',this.markers)
      this.mapContext.addMarkers({
        markers: this.markers,
        clear: true,
        success: (res) => {
          console.log('success', res)
        },
        fail: (err) => {
          console.log('fail', err)
        }
      })
    }
  },
  methods: {
    // 生成markers
    causeMarker(item,index) {
      let result = {}
      if (this.scale >= 14) {
        result = {
          latitude: item.latitude - 0,
          longitude: item.longitude - 0,
          id: index,
          iconPath: `/static/imgs/client/location-${item.whetherCooperation ? 'red' : 'blue'}.png`,
          width: 22,
          height: 26,
          label: {
            x: -20,
            y: -42,
            anchorX: -20,
            anchorY: -42,
            content: item.enterpriseName,
            fontSize: 13,
            color: '#ffffff',
            borderRadius: 20,
            bgColor: item.whetherCooperation ? '#F5222D' : '#2B74FF',
            padding: 10,
            textAlign: 'center'
          }
        }
      } else {
        result = {
          latitude: item.latitude - 0,
          longitude: item.longitude - 0,
          id: item.enterpriseId,
          iconPath: `/static/imgs/client/location-${item.whetherCooperation ? 'red' : 'blue'}.png`,
          width: 22,
          height: 26
        }
      }
      return result
    },
    // 初始化
    init() {
      if (this.location.longitude && this.location.latitude) {
        this.centerPoint.longitude = this.location.longitude
        this.centerPoint.latitude = this.location.latitude
      }
      if (this.items.length > 0) {
        this.markers = this.items.map((item,index) => {
          return this.causeMarker(item,index)
        })
      }
    },
    labeltap(e) {
			console.log('e tap:',e)
      this.$emit('labeltap', e.detail.markerId)
      if (this.selectedId == e.detail.markerId) {
        return
      }
      this.selectedId = e.detail.markerId
    },
    dragMap() {
      this.mapContext.getCenterLocation({
        success: (res) => {
          // 抛出移动事件
          this.$emit('dragMap', {
            longitude: res.longitude,
            latitude: res.latitude,
            scale: this.scale
          })
          this.centerPoint.longitude = res.longitude
          this.centerPoint.latitude = res.latitude
        },
        fail: (err) => {
          console.log('dragMap err:', err)
        }
      })
    },
    scaleMap() {
      this.mapContext.getScale({
        success: (res) => {
          this.scale = Math.ceil(res.scale)
          // 抛出缩放事件
          this.$emit('scaleMap', {
            longitude: this.centerPoint.longitude,
            latitude: this.centerPoint.latitude,
            scale: this.scale
          })
        }
      })
    },
    regionchange(e) {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      // ios使用e.detail.causedBy ; andriod使用e.causedBy
      let eventName = e.causedBy || e.detail.causedBy
      this.timer = setTimeout(() => {
        switch (eventName) {
          case 'drag':
            this.dragMap()
            break
          case 'scale':
            this.scaleMap()
            break
          default:
            break
        }
      }, 500)
    },
    // 移动到当前坐标
    moveTo({ longitude, latitude, scale }) {
      scale = Math.ceil(scale)
      if (!isNaN(scale)) {
        this.scale = scale
      } else {
        scale = null
      }
      let data = {
        longitude: longitude,
        latitude: latitude,
        scale: scale || this.scale
      }
      if (this.mapContext) {
        this.mapContext.moveToLocation({
          longitude: longitude,
          latitude: latitude,
          success: (res) => {
            console.log('移动success', res)
          },
          fail: (err) => {
            console.log('移动fail', err)
          }
        })
      }
      setTimeout(() => {
        this.$emit('reset', data)
      }, 100)
    }
  }
}
</script>

<style lang="scss">
.qn-map {
  width: auto;
  flex: 1;
}
</style>