yiliangyiyun-app/pages/grain_pulse/localtion/coordinate.vue

<template>
	<view class="container">
		<view class="content">
			<view @click='naviageToPage("/pages/grain_pulse/position/position")'>
				<image class='location' src="@/static/img/liangmai/icon_ditu.png" mode=""></image>
				<text class="title-style">{{position.name}}</text>
			</view>
			<map class="map" @tap="tap" @markertap="markertap" :latitude="position.latitude"
				:longitude="position.longitude" :markers="covers"
				:style="{height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight,width:'750rpx,flex:1'}">
			</map>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<text class="bottom-content">经度：{{position.longitude}}</text>
				<text class="bottom-content">纬度：{{position.latitude}}</text>
			</view>
			<text class="config-btn" @click="config">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowMapIndex: true,
				phoneHeight: '', //屏幕高
				phoneWidth: '', //屏幕宽
				position: {
					longitude: 116.39747,
					latitude: 39.9085,
					address: '未指定地点'
				},
				longitude: 116.39747,
				latitude: 39.9085,
				title: 'map',
				// covers: [{
				// 	id: 0,
				// 	latitude: 39.9085,
				// 	longitude: 116.39747,
				// 	iconPath: '../../../static/img/location.png',
				// }],
				covers: []
			}
		},
		onReady() {
			// 计算屏幕高度 ，宽度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					_this.phoneWidth = res.windowWidth
				}
			});
		},
		computed: { //计算
			nintyPercentScreenHeight() { //百分之百的屏幕高
				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
					return 750 / (this.phoneWidth) * (this.phoneHeight) + 'rpx'
				} else {
					return '1250rpx'
				}

			},
			seventyPercentScreenHeight() { //百分之七十的屏幕高
				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
					return 750 / (this.phoneWidth) * (this.phoneHeight) * 0.7 + 'rpx'
				} else {
					return '1000rpx'
				}

			},
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'setPosition',
				success: (res) => {
					console.log(res.data)
					that.position = res.data
					that.position.longitude = res.data.location.split(',')[0];
					that.position.latitude = res.data.location.split(',')[1];
					
					console.log(that.position.longitude)
					console.log(that.position.latitude)
					// uni.removeStorage({
					// 	key: 'setLocaltion'
					// })
				},
			
			})
		},
		onLoad() {
			// this.getLocation()
		},
		methods: {
			naviageToPage(item) {
				uni.setStorage({
					key: 'setPositionType',
					data:{type:1},
					success: function(res) {
						console.log(item)
						uni.navigateTo({
							url: item
						})
					}
				});
			
			},
			tap(e) {
				var that = this
					let newmarker =[];
							var id=1;
						
				// this.position.longitude = e.detail.longitude;
				// this.position.latitude = e.detail.latitude;
				// console.log(this.longitude)
				// console.log(this.latitude)
				// let maker= {
				// 	id: id++,
				// 	latitude: this.position.latitude,
				// 	longitude:e.detail.longitude,
				// 	iconPath: '../../../static/img/location.png',
				// }
				// newmarker.push(maker)
				// this.covers = newmarker
				var lnglat = e.detail.longitude+','+e.detail.latitude
				console.log("lnglat",lnglat)
				let parameters = {
					key: 'dd701d394d116b50268dc16470ddd615',
					location: lnglat
				}
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					data: parameters,
					success: (res) => {
						that.position=res.data.regeocode.addressComponent
						console.log(res.data.regeocode.addressComponent)
						that.position.longitude = res.data.regeocode.addressComponent.streetNumber.location.split(',')[0];
						that.position.latitude = res.data.regeocode.addressComponent.streetNumber.location.split(',')[1];
						let maker= {
							id: id++,
							latitude: that.position.latitude,
							longitude:that.position.longitude,
							iconPath: '../../../static/img/location.png',
						}
						newmarker.push(maker)
						that.covers = newmarker
					}
				});

			},
			config() {
				// console.log("this.position",this.position)
					// this.position.selectLocation = this.position.longitude+","+this.position.latitude
					// console.log("this.position",this.position)
				uni.navigateTo({
						url:"/pages/grain_pulse/enter?position="+JSON.stringify(this.position)
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		flex: 1;
		width: 750rpx;
	}

	.bottom {
		position: fixed;
		bottom: 54rpx;
		left: 25rpx;
		right: 0;
		width:700rpx;
		background: white;
		flex-direction: row;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		padding: 22rpx 20rpx 22rpx 49rpx;
		border-radius: 20rpx;
	}

	.title-style {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.config-btn{
		width: 144rpx;
		height: 67rpx;
		line-height: 67rpx;
		background: #22C572;
		border-radius: 10rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
	}
	.bottom-content{
		font-size: 28rpx;
	}
	.location {
		width: 27rpx;
		height: 31rpx;
	}
</style>