crm-mobile/pages_common/map/chooseAddress.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="选择位置" pervent @back="handleCancel">
        <!-- #ifndef MP-WEIXIN -->
        <!-- <button class="button white-btn" @click="handleConfirm">
					确定
				</button> -->
        <!-- #endif -->
      </wk-nav-bar>
			
      <view class="container">
        <map
          id="chooseMap"
          :style="{
            width: mapStyle.width,
            flex: mapStyle.flex
          }"
          :longitude="centerPoint.longitude"
          :latitude="centerPoint.latitude"
          :markers="markers" />
					
        <view class="poi-container">
          <view
            v-for="(poi, index) in poiList"
            :key="poi.id"
            class="poi-item"
            @click="handleChoosePoi(index, $event)">
            <view class="left">
              <view class="poi-item-name">
                {{ poi.name }}
              </view>
              <view class="poi-item-address">
                {{ poi.address || '' }}
              </view>
            </view>
            <view class="right">
              <text v-if="activeIndex === index" class="wk wk-check icon" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getLocation,
    getNearbyPois
  } from '@/utils/map.js'
  import { deepCopy } from '@/utils/lib.js'
	
  export default {
    name: 'ChooseAddress',
    data() {
      return {
        centerPoint: {}, // 地图中心
				
        devicePoint: {}, // 设备地址
        poiList: [], // poi
        activeIndex: 0,
				
        mapStyle: {
          width: 0,
          flex: 1
        },
        markers: []
      }
    },
    mounted() {
      this.mapStyle = {
        width: uni.upx2px(750) + 'px',
        flex: 1
      }
      this.getLocation()
    },
    methods: {
      /**
       * 定位
       */
      getLocation() {
        getLocation(false).then(data => {
          console.log('定位结果：0.0', data)
          this.centerPoint = data
          this.devicePoint = deepCopy(this.centerPoint)
          this.getNearbyPois(data)
        }).catch(() => {
          this.$toast('定位失败')
        })
      },
			
      /**
       * 逆地址解析（获取附近的POI点）
       */
      getNearbyPois(data) {
        // >> 高德地图 <<
        // getNearbyPois({
        // 	location: `${data.longitude},${data.latitude}`,
        // 	extensions: 'all',
        // 	output: 'json'
        // }).then(data => {
        // 	console.log('位置信息: ', data)
        // 	this.centerPoint.address = data.regeocode.formatted_address
        // 	if (this.$isEmpty(this.centerPoint.address)) {
        // 		this.centerPoint.address = ''
        // 	}
        // 	this.devicePoint = deepCopy(this.centerPoint)

        // 	this.poiList = data.regeocode.pois.map(o => {
        // 		return {
        // 			...o,
        // 			longitude: o.location.split(',')[0],
        // 			latitude: o.location.split(',')[1],
        // 		}
        // 	})

        // 	if (this.poiList.length > 0) {
        // 		this.poiList.unshift({
        // 			id: 1,
        // 			name: '我的位置',
        // 			address: this.centerPoint.address,
        // 			longitude: this.devicePoint.longitude,
        // 			latitude: this.devicePoint.latitude
        // 		})
        // 		this.handleChoosePoi(0)
        // 	} else {
        // 		this.markers = [this.centerPoint]
        // 	}
        // }).catch(() => {
        // 	this.$toast('获取位置信息失败')
        // })
				
        // >>  腾讯地图 <<
        getNearbyPois({
          location: `${data.latitude},${data.longitude}`,
          get_poi: 1,
          poi_options: 'radius=200'
        }).then(res => {
          console.log('位置信息: ', res)
          this.centerPoint.address = res.result.address
          if (this.$isEmpty(this.centerPoint.address)) {
            this.centerPoint.address = ''
          }
          this.devicePoint = deepCopy(this.centerPoint)
					
          this.poiList = res.result.pois.map(o => {
            return {
							...o,
							name: o.title,
							longitude: o.location.lng,
							latitude: o.location.lat,
            }
          })
					
          if (this.poiList.length > 0) {
            this.poiList.unshift({
              id: 1,
              name: '我的位置',
              address: this.centerPoint.address,
              longitude: this.devicePoint.longitude,
              latitude: this.devicePoint.latitude
            })
          } else {
            this.markers = [this.centerPoint]
          }
        }).catch(() => {
          this.$toast('获取位置信息失败')
        })
        // -----------------------------------------------------------------
      },
			
      handleChoosePoi(index, evt) {
        this.activeIndex = index
        this.centerPoint = this.poiList[index]
        this.markers = [{
					...this.centerPoint,
					width: 30,
					height: 30,
					iconPath: this.$static('images/map/location.png')
        }]
        if (evt) {
          this.handleConfirm()
        }
      },
			
      handleConfirm() {
        uni.$emit('choose-address', this.centerPoint)
        this.$Router.navigateBack()
      },
			
      handleCancel() {
        uni.$off('choose-address')
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
	.container {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		#chooseMap {
			width: 750rpx;
		}
		
		.poi-container {
			width: 100%;
			max-height: 450rpx;
			overflow: auto;
			background-color: white;
			
			.poi-item {
				padding: 15rpx 32rpx;
				border-bottom: 1rpx solid $border-color;
				@include left;
				.left {
					flex: 1;
					overflow: hidden;
					.poi-item-name {
						font-size: 30rpx;
						@include ellipsis;
					}
					.poi-item-address {
						font-size: 24rpx;
						color: $light;
						@include ellipsis;
					}
				}
				.right {
					width: 50rpx;
					margin-left: 20rpx;
					@include center;
					.icon {
						font-size: 36rpx;
						color: $theme-color;
					}
				}
			}
			.poi-item::last-child {
				border-bottom: 0 none;
			}
		}
	}
</style>