zhgdyunapp/pages/projectEnd/exerciseInfo/map.vue

<template>
  <view>
    <view class="fixedheader">
      <headers :showBack="true">
        <view class="headerName"> 当前位置 </view>
      </headers>
    </view>
    <view class="content" :style="{ paddingTop: mobileTopHeight + fixedHeaderHeight + 'px' }" v-show="showMap">
      <view class="search-box">
        <input class="search-input" v-model="searchVal" placeholder="请输入地点" />
        <button class="search-btn" size="mini" type="primary" @click="searchArea">搜索</button>
      </view>
      <map
        id="map"
        :style="{
          width: mapConfig.width + 'px',
          height: mapConfig.height + 'px',
          margin: 0
        }"
        :show-scale="true"
        :scale="mapConfig.scale"
        :latitude="mapConfig.latitude"
        :longitude="mapConfig.longitude"
        :markers="mapConfig.markers"
        :circles="mapConfig.circles"
      ></map>
    </view>
  </view>
</template>

<script>
let mapSearch = weex.requireModule('mapSearch')
export default {
  data() {
    return {
      mobileTopHeight: 0,
      fixedHeaderHeight: 0,
      mapConfig: {
        width: 0,
        height: 0,
        scale: 14,
        latitude: undefined,
        longitude: undefined,
        markers: [], // 定位配置
        circles: [], // 显示圆配置
        address: ''
      },
      showMap: false,
      coordType: 'gcj02',
      map: null,
      standOptions: [30, 50, 100, 200, 300],
      searchVal: ''
    }
  },
  async mounted() {
    let that = this
    uni.getSystemInfo({
      success(res) {
        that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
        uni.setStorageSync('systemInfo', res)
        console.log(res)
      }
    })
    let info = uni.getWindowInfo()
    this.mapConfig.width = info.windowWidth
    this.fixedHeaderHeight = await this.getHeight('.fixedheader')
    console.info(this.fixedHeaderHeight, '--------')
    this.mapConfig.height = info.windowHeight - this.mobileTopHeight - this.fixedHeaderHeight - 2 - 50
    // this.mapConfig.height = 450;
    console.log('this.mobileTopHeight', this.mobileTopHeight, this.mapConfig.height)
    this.init()
  },
  onLoad(option) {
    this.mapConfig.latitude = option.latitude
    this.mapConfig.longitude = option.longitude
    this.mapConfig.address = option.addr

    // console.info(info, 'info.windowHeight')
    this.showMap = false
    uni.showLoading({
      title: '加载地图资源中'
    })
    // this.openMonitor()
  },
  methods: {
    async getHeight(name) {
      const query = uni.createSelectorQuery().in(this)
      return new Promise(resolve => {
        query
          .select(name)
          .boundingClientRect(data => {
            resolve(data.height)
          })
          .exec()
      })
    },
    init() {
      let that = this
      if (this.mapConfig.address) {
        mapSearch.poiKeywordsSearch(
          {
            point: {
              latitude: this.mapConfig.latitude,
              longitude: this.mapConfig.longitude
            },
            key: this.mapConfig.address
          },
          res => {
            console.info('搜索:', res)
            if (res.poiList.length) {
              const { latitude, longitude } = res.poiList[0].location
              that.mapConfig.latitude = latitude
              that.mapConfig.longitude = longitude
              that.initMap()
            }
          }
        )
      } else {
        this.initMap()
      }
    },
    initMap() {
      console.info(this.mapConfig, 'initMap')
      if (this.mapConfig.latitude && this.mapConfig.longitude) {
        this.map = uni.createMapContext('map', this)
        // this.registerEvent()
        this.mapSetLocation()
        // this.drawCircle()
        this.showMap = true
        uni.hideLoading()
      } else {
        // this.mapGetLocation()
      }
    },
    mapGetLocation() {
      let that = this
      uni.getLocation({
        type: that.coordType,
        geocode: true,
        isHighAccuracy: 'true',
        accuracy: 'best', // 精度值为20m
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          console.log(res, 'res..')
          that.mapConfig.latitude = res.latitude
          that.mapConfig.longitude = res.longitude
          const { country, province, city, district, street, streetNum, poiName } = res.address
          that.mapConfig.address = country + province + city + district + street + streetNum + poiName
          that.map = uni.createMapContext('map', that)
          //   that.registerEvent()
          that.mapSetLocation()
          //   that.drawCircle()
          that.showMap = true
          uni.hideLoading()
        },
        fail: function (msg) {
          console.log('获取位置失败', msg)
        }
      })
    },
    // 注册点击事件
    registerEvent() {
      let that = this
      this.map.$getAppMap().onclick = function (point) {
        console.info(point, 'point')
        that.mapConfig.longitude = point.longitude
        that.mapConfig.latitude = point.latitude
        that.mapSetLocation()
        that.drawCircle()
        that.getAddress()
      }
    },
    // 设置定位
    mapSetLocation() {
      this.mapConfig.markers = [
        {
          latitude: this.mapConfig.latitude,
          longitude: this.mapConfig.longitude,
          iconPath: '../../static/map/end.png'
        }
      ]
    },
    //画圆
    drawCircle() {
      this.mapConfig.circles = [
        // 显示圆配置
        {
          latitude: this.mapConfig.latitude,
          longitude: this.mapConfig.longitude,
          color: '#3C71F2',
          // 填充颜色
          fillColor: '#5181F670',
          fillOpacity: 0.56,
          // 边
          strokeWidth: 1,
          level: 'aboveroads'
        }
      ]
      this.mapConfig.scale = this.standArea >= 200 ? 16 : this.standArea >= 100 ? 17 : 18
    },
    // handleTapMap(e) {
    // 	console.info('点击', e)
    // 	let that = this;
    // 	const res = that.map.getCenterLocation({
    // 		success: (res) => {
    // 			console.info('当前定位', res)
    // 			that.mapConfig.latitude = res.latitude;
    // 			that.mapConfig.longitude = res.longitude;
    // 			that.mapSetLocation()
    // 			that.drawCircle()
    // 		}
    // 	})
    // },
    // 切换范围
    handleChangeStandArea(e) {
      this.standArea = this.standOptions[e.detail.value]
      this.drawCircle()
    },
    // 搜索详细位置
    searchArea() {
      let that = this
      if (!this.searchVal) return
      mapSearch.poiKeywordsSearch(
        {
          point: {
            latitude: this.mapConfig.latitude,
            longitude: this.mapConfig.longitude
          },
          key: this.searchVal
        },
        res => {
          console.info('搜索:', res)
          if (res.poiList.length) {
            const { latitude, longitude } = res.poiList[0].location
            that.mapConfig.latitude = latitude
            that.mapConfig.longitude = longitude
            that.mapSetLocation()
            // that.drawCircle()
            that.getAddress()
          }
        }
      )
    },
    // 保存位置
    saveLocation() {
      uni.$emit('locationSuccessEvent', {
        latitude: this.mapConfig.latitude,
        longitude: this.mapConfig.longitude,
        address: this.mapConfig.address
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 10)
    },
    // 地址逆解析，根据经纬度获取详细位置
    getAddress() {
      mapSearch.reverseGeocode(
        {
          point: {
            latitude: this.mapConfig.latitude,
            longitude: this.mapConfig.longitude
          }
        },
        res => {
          console.info('成功回调', res, this.mapConfig)
          this.mapConfig.address = res.address || '未知位置'
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.fixedheader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  .headerName {
    z-index: 1;
  }
  /deep/ .headerBox {
    background-color: #5181f6;
    color: white;
    .uni-icons {
      color: white !important;
    }
  }
}
.content {
  width: 100%;
  box-sizing: border-box;
}
.search-box {
  height: 50px;
  background-color: rgba(16, 16, 16, 0.08);
  display: flex;
  align-items: center;
}
.picker {
  width: 140rpx;
  height: 62rpx;
  line-height: 40rpx;
  border-radius: 22rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 51, 51, 0.48);
  font-size: 28rpx;
  display: flex;
  padding: 0 16rpx;
  margin: 0 16rpx;
  align-items: center;
}
.search-input {
  flex: 1;
  min-width: 400rpx;
  height: 62rpx;
  line-height: 40rpx;
  border-radius: 22rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 51, 51, 0.48);
  font-size: 28rpx;
  padding: 0 16rpx;
}
.search-btn {
  margin: 0 16rpx;
  flex-shrink: 0;
}
.save-btn {
  width: 50%;
  z-index: 999;
  border-radius: 0;
}
uni-button:after {
  border-radius: 0;
}
.btn-group {
  padding: 0;
  margin: 0;
  display: flex;
  // height: 50px;
}
</style>