TSYWXT-CLOUD-APP/pages/map/maplocation.vue

<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view style="width: 100%;height: 160px;">
			<uni-forms ref="baseForm" :model="formData">
				<uni-card title="定位信息" :is-shadow="false">
					<view class="view-flex-inline">
						<uni-icons class="input-uni-icon" type="location" size="18" color="coral" />
						<text style="color: black;font-size: 1rem;margin-left: 4px;">经纬度:</text>
						<text
							style="color: blue;font-size: 0.8rem;padding-left: 5px">{{formData.longitude}},{{formData.latitude}}</text>
					</view>
					<view class="view-flex-inline" style="margin-top: 5px;">
						<uni-icons class="input-uni-icon" type="map-pin-ellipse" size="18" color="coral" />
						<text style="color: black;font-size: 1rem;margin-left: 4px;">地址:</text>
						<text style="color: blue;font-size: 0.8rem;padding-left: 5px">{{formData.address}}</text>
					</view>
					<view class="item-button-group " style="margin-top: 10px;padding-right: 0px; justify-content: center;">
						<!-- 定位返回 -->
						<view class="item-button mid-size" style="background-color: coral;" @click="onGetLngLat()">
							<view class="items-line">
								<uni-icons class="input-uni-icon" type="checkmarkempty" size="18" color="black" />
								<text class="button-text">确定</text>
							</view>
						</view>
						<!-- 提交补录定位 -->
<!-- 						<view v-else-if="type==2" class="item-button mid-size" style="background-color: coral;" @click="toSubmit()">
							<view class="items-line">
								<uni-icons class="input-uni-icon" type="checkmarkempty" size="18" color="black" />
								<text class="button-text">立即提交</text>
							</view>
						</view> -->
					</view>
				</uni-card>
			</uni-forms>
		</view>
		<view style="width: 100%;height: 30px;">
			<view class="view-flex-inline-center">
				<text style="font-size: 0.8rem;color: orange;">点击下方地图重新拾取坐标信息</text>
			</view>
		</view>
		<view class="page-section page-section-gap">
			<map id="myMap" ref="myMap" :style="mapStyles" enable-zoom="true" :circles="circles" :scale="scale"
				:latitude="formData.latitude" :longitude="formData.longitude" @tap="tap">
			</map>
		</view>
	</view>
</template>

<script>
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	import http from '@/http/api.js';
	import {
		devUrl,
		prodUrl
	} from '@/common/setting';
	export default {
		data() {
			return {
				title: '地图拾取坐标',
				baseURL: '',
				type: 1,
				scale: 13,
				circles: [],
				formData: {
					id: '',
					latitude: '',
					longitude: '',
					address: '',
				},
				rules: {
					latitude: {
						rules: [{
							required: true,
							errorMessage: '必填项',
						}]
					},
					longitude: {
						rules: [{
							required: true,
							errorMessage: '必填项',
						}, ]
					},
				},
				mapStyles: {
					width: '100%',
					height: '600px'
				},
			}
		},
		onLoad(option) {
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			this.type = option.type;
			//if (this.type == 1) {
				this.restartLocation();
			// } else if (this.type == 2) {
			// 	this.formData.id = option.id;
			// 	let lng = option.lng;
			// 	let lat = option.lat;
			// 	if (lng != undefined && lng != null && lng != '' && lat != undefined && lat != null && lat != '') {
			// 		this.formData.longitude = lng;
			// 		this.formData.latitude = lat;
			// 		if (option.add != undefined && option.add != null) {
			// 			this.formData.address = option.add;
			// 		}
			// 		this.setMapPoint();
			// 	} else {
			// 		this.restartLocation();
			// 	}
			// }
			this.mapStyles.height = (uni.getWindowInfo().windowHeight - 50 - 160 - 30 - 10) + "px";
		},
		computed: {},
		onShow() {},
		onReady() {
			// 需要在onReady中设置规则
			// this.$refs.baseForm.setRules(this.rules)
			this.mapContext = uni.createMapContext('myMap', this);
		},
		mounted() {
			// #ifdef APP-PLUS
			this.addMapEvent();
			// #endif
		},
		methods: {
			addMapEvent() {
				let that = this;
				var maps = uni.createMapContext('myMap', this).$getAppMap();
				maps.onclick = function(point) {
					that.formData.longitude = new Number(point.longitude).toFixed(6);
					that.formData.latitude = new Number(point.latitude).toFixed(6);
					that.getAddress(point.longitude, point.latitude);
					that.setMapPoint();
				}
			},
			tap(e) {
				// #ifdef MP-WEIXIN
				let lat = e.target.latitude;
				let lng = e.target.longitude;
				this.formData.longitude = new Number(lng).toFixed(6);
				this.formData.latitude = new Number(lat).toFixed(6);
				this.getAddress(lng, lat);
				this.setMapPoint();
				// #endif
			},
			//返回上一页
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			restartLocation() {
				console.log('重新定位***********************');
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置：' + JSON.stringify(res));
						let p = gcoord.transform(
							[res.longitude, res.latitude],
							gcoord.WGS84,
							gcoord.GCJ02
						);
						that.formData.latitude = new Number(p[1]).toFixed(6);
						that.formData.longitude = new Number(p[0]).toFixed(6);
						that.getAddress(res.longitude, res.latitude);
						that.setMapPoint();
					}
				});
			},
			setMapPoint() {
				let circles = [];
				let rtu = {};
				rtu['longitude'] = parseFloat(this.formData.longitude);
				rtu['latitude'] = parseFloat(this.formData.latitude);
				rtu['color'] = '#FF0000';
				rtu['fillColor'] = '#FFFF00';
				rtu['radius'] = 100;
				circles.push(rtu);
				this.circles = circles;
			},
			getAddress(lng, lat) {
				let that = this;
				let url = 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
					'&key=4HYBZ-EB23D-SLC42-HQ5R3-LP3LQ-OZFU5';
				http.request({
					url: url,
					method: 'GET',
				}).then(res => {
					//console.log(JSON.stringify(res));
				}).catch(err => {
					//console.log(JSON.stringify(err))
					that.formData.address = err.data.result.address;
				})
			},
			onGetLngLat() {
				let p = {
					'lng': this.formData.longitude,
					'lat': this.formData.latitude,
					'add': this.formData.address,
				};
				uni.$emit('lngLat', JSON.stringify(p))
				this.toBack();
			},
			toSubmit() {
				let that = this;
				let lng = this.formData.longitude;
				let lat = this.formData.latitude;
				if (lng != undefined && lng != null && lng != '' && lat != undefined && lat != null && lat != '') {
					this.submit();
				} else {
					uni.showModal({
						content: "经纬度不能为空，请重新再试!",
						showCancel: false,
						success(res) {
							if (res.confirm) {

							}
						}
					});
				}
			},
			submit() {
				let that = this;
				console.log('toSubmit事件:', JSON.stringify(this.formData));
				http.request({
					url: '/galaxy-business/yj/resident/location/add',
					method: 'POST',
					data: this.formData
				}).then(res => {
					//console.log('res ', JSON.stringify(res));
					if (res.success) {
						if (res.code == 200) {
							//that.clearCache();
							uni.showModal({
								content: '操作已成功',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										that.toBack();
									}
								}
							});
						} else {
							uni.showModal({
								content: '提交失败',
								showCancel: false
							});
						}
					} else {
						uni.showModal({
							content: '提交失败',
							showCancel: false
						});
					}
				}).catch(err => {
					uni.showModal({
						content: '' + err.data.msg,
						showCancel: false
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 0 100rpx;
	}
</style>