sailun-tbr-web/components/mi-map/mi-map.vue

<template>
	<view class="server-place">
		<map id='map' ref='map' v-bind:style="{height: mapH + 'px'}" style="width: 100%;" :latitude="latitude" :longitude="longitude"
		 :controls='controls' scale="18" @regionchange='mapChange'>
		</map>
		<view class="map-tools">
			<view class="my-location">
				<image class="left" :src="myPositionIcon" mode="" @tap="toMyLocation"></image>
				<view class="right">
					<text class="title">我的位置</text>
					<text class="text">{{myAddress.addressInfo}}</text>
				</view>
			</view>

			<view class="start-place">
				<view class="place">
					<text class="text">{{addressObj.address.addressInfo}}</text>
				</view>
				<view class="tip">{{descText}}</view>
			</view>
			<button @tap="submitAdress" class="sure" type="primary">确认选择</button>
		</view>
	</view>

</template>

<script>
	const app = getApp()
	var QQMapWX = require('./qqmap-wx-jssdk.min.js')
	var qqmapsdk = new QQMapWX({
		key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
	})
	export default {
		props: {
			tipText: {
				type: String,
				default: '选择位置'
			},
			descText: {
				type: String,
				default: '使用当前定位或在地图上标记位置'
			},
			positionIcon: {
				type: String,
				default: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png'
			},
			myPositionIcon: {
				type: String,
				default: 'https://s2.ax1x.com/2020/03/10/8CjxSJ.png'
			}
		},
		data() {
			return {
				mapH: 0, // 地图高度，可在initMapH()中设置高度
				longitude: 0, // 初始经度
				latitude: 0, // 初始纬度
				myAddress: '', // 初始地址信息
				addressObj: { // 地图选点信息
					longitude: '',
					latitude: '',
					address: '请选择集合地点'
				},
				controls: [], // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍

			};
		},
		mounted() {
			this.getLocation()
			this.initMapH()
			this.initPositionIcon()
		},
		methods: {
			// 初始化地图中心位置的定位图片
			initPositionIcon() {
				setTimeout(() => {
					this.controls = [{
						iconPath: this.positionIcon,
						position: {
							left: uni.getSystemInfoSync().screenWidth/2-15,
							top: uni.getSystemInfoSync().screenHeight/2-225,
							width: 30,
							height: 30,
						},
						clickable: false
					}]
				}, 100)
			},
			// 查询现在的位置
			getLocation() {
				let this_ = this
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					geocode: true,
					success: function(res) {
						this_.initMap(res)
						console.log(res);
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限'
						})
					}
				})
			},

			// 初始化我的位置
			async initMap(res) {
				this.longitude = res.longitude;
				this.latitude = res.latitude;
				this.myAddress = await this.getAddressName(res);
				this.addressObj = Object.assign({}, this.addressObj, {
					longitude: res.longitude,
					latitude: res.latitude,
					address: this.myAddress
				})
			},

			// 地图选择位置后 查询地点名称
			async checkMap(res) {
				this.addressObj = Object.assign({}, this.addressObj, {
					longitude: res.longitude,
					latitude: res.latitude,
					address: await this.getAddressName(res)
				})
				console.log('当前位置:' + res.latitude + '|' + res.longitude);
			},

			// 监听地图位置变化
			mapChange(e) {
				let that = this
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if (e.type == 'regionchange' || e.type == 'end') {
						that.mapCtx = uni.createMapContext('map', this)
						that.mapCtx.getCenterLocation({
							success: res => {
								this.checkMap(res)
								console.log(res);
							},
							fail: err => {
								console.log(err);
							}
						})
					}
				}, 200)
			},
			// 查询地图中心点的名称
			getAddressName(addressObj) {

				return new Promise((res) => {
					// #ifdef APP-PLUS
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: addressObj.latitude,
							longitude: addressObj.longitude
						},
						get_poi: 1,
						poi_options: "page_size=1;page_index=1",
						output: 'jsonp',
						success: (e) => {
							res({addressInfo:e.result.formatted_addresses.recommend,province:e.result.address_component.province,city:e.result.address_component.city,district:e.result.address_component.district,});
						},
						fail: err => {
							res(err);
						}
					})
					// #endif

					// #ifndef APP-PLUS
					// ======================== jsonp跨域 ======================== 
					const KEY = 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
					let locationObj = addressObj.latitude + ',' + addressObj.longitude
					let url =
						'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
					this.$jsonp(url, {
							key: KEY,
							location: locationObj
						}).then(e => {
							res(e.result.formatted_addresses.recommend);
						})
						.catch(err => {
							res(err);
						})
					// #endif


				})

			},
			// 计算地图的高度
			initMapH() {
				// #ifdef APP-PLUS
				this.mapH = uni.getSystemInfoSync().windowHeight - 210;
				// #endif
				// // #ifndef APP-PLUS
				// this.mapH = uni.getSystemInfoSync().windowHeight - 170;
				// // #endif
			},
			// 移动到我的位置
			toMyLocation() {
				this.getLocation()
			},
			// 提交
			submitAdress() {
				this.controls = []
				setTimeout(() => {
					this.$emit('updateAddress', this.addressObj)
				}, 100)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.server-place {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100%;
		z-index: 999;

		.map-tools {
			width: 750rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.my-location {
				width: 700rpx;
				height: 100rpx;
				box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 10rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				overflow: hidden;
				margin-top: 10rpx;
				.left {
					background: #3384ff;
					// flex: 20%;
					width: 100rpx;
					height: 100%;
				}

				.right {
					font-size: 26rpx;
					margin-left: 10rpx;
					color: #111;
					// flex: 80%;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					.text {
						width: 500rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #3384FF;
						margin-top: 10rpx;
					}
				}
			}

			.start-place {
				width: 700rpx;
				height: 100rpx;
				box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 10rpx;
				margin-top: 20rpx;
				.place {
					margin-left: 20rpx;
					.title {
						font-size: 24rpx;
						font-weight: bold;
						color: #111;
					}

					.text {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #3384FF;
						font-weight: bold;
						width: 700rpx;
						vertical-align: middle;
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.tip {
					margin-left: 20rpx;
					font-size:20rpx;
					color: #666;
				}
			}

			.sure {
				font-weight: 600;
				width: 700rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>