uniapp地图选点

<template>
	<view class="map_container flex-cloumn">
		<map id="map" class="map" :longitude="slongitude" :latitude="slatitude" @regionchange="regionchange">
			<cover-view class="img_box">
				<cover-image v-if="loaded" class="img" src="/static/imgs/purchaser/location.png"></cover-image>
			</cover-view>
		</map>
		<view class="msg_box">
			<view class="top flex">
				<text class="key">坐标地址:</text>
				<text class="value">{{address}}</text>
			</view>
			<view class="bottom">
				<view class="left flex">
					<text class="key">经度：</text>
					<text class="value">{{longitude}}</text>
				</view>
				<view class="right flex">
					<text class="key">纬度：</text>
					<text class="value">{{latitude}}</text>
				</view>
			</view>
			<view class="btn">
				<u-button type="error" hover-class="none" @click="confirm">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapContext: null, //如果添加点击事件时使用；
				$MAP: null, //获取地图对象；
				latitude: '',
				longitude: '',
				slatitude: '', //起始纬度；
				slongitude: '', //起始经度
				address: '请选择坐标位置',
				loaded: false
			}
		},
		onReady() {
			this.getPosition();
			this.loaded = true;
		},
		methods: {
			getPosition() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res);
						this.slatitude = this.latitude = res.latitude;
						this.slongitude = this.longitude = res.longitude;
						this.createMap()
					}
				})
			},
			createMap() {
				this.$MAP = uni.createMapContext('map', this);
				this.mapContext = this.$MAP.$getAppMap();
			},
			
			// getAddress;
			async getAddress() {
				let key = 'xxxxxxxxxxxx';

				console.log(111);
				const { result } = await this.translateCoo();
				const { x, y } = result[0];
				console.log(x, y);
				uni.request({
					url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=' + key + '&output=json&coordtype=wgs84ll&location=' + y + ',' + x + '&radius=500',
					success: res => {
						console.log('getAddress：', res);
						this.address = res.data.result.formatted_address;
					}
				})
			},
			translateCoo() {
				let key = 'xxxxxxxxx',
					lati = this.latitude,
					longi = this.longitude;
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://api.map.baidu.com/geoconv/v1/?coords=' + longi + ',' + lati + '&from=3&to=5&ak=' + key,
						success: res => {
							console.log('translateCoo：', res);
							if (res.statusCode == 200) {
								resolve(res.data)
							} else {
								reject(res)
							}
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			regionchange(e) {
				this.getCenter()
			},
			getCenter() {
				this.$MAP.getCenterLocation({
					success: res => {
						// console.log('getCenter:', res);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.getAddress()
					}
				})
			},
			confirm() {
				if (this.address === '请选择坐标位置') {
					this.$u.toast('请选择地址坐标');
					return;
				}
				uni.$emit('selectAddressLongi', {
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address
				})
				uni.navigateBack()
			},
			// 点击事件（弃用）
			addEvent() {
				this.mapContext.onclick = (position) => {
					this.latitude = position.latitude;
					this.longitude = position.longitude;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.map_container {
		width: 100vw;
		height: 100vh;
		justify-content: space-between;

		.map {
			width: 750rpx;
			height: 70vh;
			flex: 1;
			z-index: 1;
		}

		.img_box {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80rpx;
			height: 80rpx;
			z-index: 999;

			.img {
				width: 80rpx;
				height: 80rpx;
				z-index: 999;
			}
		}

		.msg_box {
			flex-shrink: 0;
			padding: 100rpx 30rpx;
			padding-bottom: 100rpx;
			font-size: 34rpx;
			border-top: 2rpx solid #ccc;
			background-color: #fff;

			.top {
				width: 100%;
				margin-bottom: 40rpx;

				.key {
					margin-right: 30rpx;
				}

				.value {
					font-size: 30rpx;
				}
			}

			.bottom {
				margin-bottom: 100rpx;

				.left {
					margin-bottom: 40rpx;
					width: 100%;
				}

				.right {
					width: 100%;
				}

				.key {
					margin-right: 10rpx;
				}

				.value {
					background-color: #eee;
					margin-right: 20rpx;
					flex: 1;
					padding: 10rpx;
					font-size: 30rpx;
				}
			}
		}
	}
</style>