xuan-pay-cweb/pages/index/map/map.vue

<template>
	<view class="map-box">
		<map id="maps" class="tui-maps" :longitude="longitude" :latitude="latitude" :scale="16"
			@regionchange="regionchange" :style="{'width':windowWidth+'px','height':'300px'}">
			<cover-image class="cover-image" src="../../../static/img/location.png" />
			<cover-view class="tip">您可以拖动地图，标记当前精准位置</cover-view>
		</map>
		<view class="gps-body" v-if="poiss.length > 0">
			<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" style="height:720rpx;">
				<block v-for="(item,index) in poiss" :key="item.id">
					<view class="gps-lists">
						<text class="gps-title">{{item.title}}</text>
						<view class="gps-flex">
							<view class="gps-view">{{item.address}}</view>
							<view style="margin-top:-18rpx;">
								<radio-group @change="radioChange(item,index)">
									<radio :checked="index === current" />
								</radio-group>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="but">
			<button type="primary" @click="handleConfirm">
				确认位置
			</button>
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('../../../Utils/js/qqmap-wx-jssdk')
	const qqmapsdk = new QQMapWX({
		key: '7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB'
	})
	let app = getApp();
	export default {
		data() {
			return {
				longitude: null,
				latitude: null,
				windowWidth: 0,
				poiss: [],
				scrollTop: 0,
				current: 0,
				address: {},
				mapContext: null
			}
		},
		//第一次初始化用户位置信息
		onLoad() {
			try {
				var th_is = this;
				th_is.mapContext = uni.createMapContext('maps')
				const res = uni.getSystemInfoSync();
				th_is.windowWidth = res.windowWidth;
				uni.showLoading({
					title: '正在获取定位中',
				});
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'true',
					geocode: 'true',
					success: (res) => {
						th_is.longitude = res.longitude;
						th_is.latitude = res.latitude;
						uni.hideLoading();
						th_is.getAddress(th_is.latitude, th_is.longitude);
					}
				})
			} catch (e) {
				// error
			}
		},
		methods: {
			//每移动一次获取周围地址
			regionchange(e) {
				var th_is = this;
				if (e.type == "end") {
					th_is.longitude = e.detail.centerLocation.longitude;
					th_is.latitude = e.detail.centerLocation.latitude;
					th_is.getAddress(th_is.latitude, th_is.longitude);
				}
			},
			//获取附近位置信息
			getAddress(longitude, latitude) {
				let location = [longitude, latitude]
				let StringLocation = location.toString();
				var th_is = this;
				qqmapsdk.reverseGeocoder({
					location: StringLocation,
					get_poi: 1,
					poi_options: 'policy=1;page_size=20;page_index=1',
					success: res => {
						th_is.poiss = res.result.pois;
						th_is.address = res.result.pois.length > 0 ? res.result.pois[0] : {}
					},
					fail: err => {
						uni.showToast({
							title: err.message,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			radioChange(item, evt) {
				this.current = evt;
				this.mapContext.moveToLocation({
					latitude: item.location.lat,
					longitude: item.location.lng
				})
				this.address = Object.assign(item);
				// console.log(item);
			},
			//确认位置
			handleConfirm() {
				console.log('======-----------' + JSON.stringify(this.address));
				uni.$emit('onAddressChange', this.address);
				app.globalData.storeMessage = this.address;
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					});
				}, 500)
			}
		}
	}
</script>

<style scoped lang="scss">
	.map-box {
		padding-bottom: constant(safe-area-inset-bottom); // 底部安全区
		padding-bottom: env(safe-area-inset-bottom); // 底部安全区
		box-sizing: content-box;
	}

	.tui-maps {
		width: 100%;
		height: 600rpx;
		// position: relative;
	}

	.cover-image {
		width: 62rpx;
		height: 62rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.tip {
		font-size: 20rpx;
		color: #b6b6b6;
		line-height: 42rpx;
		padding: 0 20rpx;
		position: absolute;
		left: 50%;
		bottom: 30rpx;
		box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
		background-color: #fff;
		border-radius: 4px;
		transform: translateX(-50%);
	}

	.gps-body {
		width: 100%;
		padding-top: 20rpx;
		// padding-bottom: 32rpx;
		// box-sizing: border-box;
		background-color: #FFFFFF;
		// position: absolute;
		// top: 600rpx;
		// bottom: 0;
		font-size: 26rpx;


		.gps-lists {
			width: 98%;
			height: 100rpx;
			margin: 0px auto;
			border: 1px solid #f9f9f9;

			.gps-flex {
				display: flex;
				justify-content: space-between;
			}

			.gps-flex /deep/ .uni-radio-input {
				width: 40rpx;
				height: 40rpx;
			}

			.gps-title {
				padding-left: 10rpx;
				display: block;
				padding-top: 15rpx;
			}

			.gps-view {
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 10rpx;
				color: #b6b6b6;
				font-size: 25rpx;
				margin-top: 15rpx;
			}
		}
	}

	.but {
		margin-top: 32rpx;
		padding: 0 32rpx;
	}
</style>