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

<template>
	<view class="container">
		<view class="content">
			<text class="title-style">{{nowLocation.address}}</text>
			<map class="map" @tap="tap" @markertap="markertap" :latitude="nowLocation.latitude"
				:longitude="nowLocation.longitude" :markers="covers"
				:style="{height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight,width:'750rpx,flex:1'}">
			</map>
		</view>
		<view class="bottom">
			<text class="bottom-text">
				{{longitude}},{{latitude}}
			</text>
			<text class="config" @click="config">确定</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowMapIndex: true,
				phoneHeight: '', //屏幕高
				phoneWidth: '', //屏幕宽
				detail: {
					longitude: '',
					latitude: ''
				},
				nowLocation: {
					longitude: '',
					latitude: '',
					address: '山海广场'
				},
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 0,
					latitude: 39.9085,
					longitude: 116.39747,
					iconPath: '../../../static/img/location.png',
				}]
			}
		},
		onReady() {
	
		},
		computed: { //计算
			nintyPercentScreenHeight() { //百分之九十的屏幕高
				if (this.phoneHeight !== '' && this.phoneWidth !== '') {
					return 750 / (this.phoneWidth) * (this.phoneHeight) * 0.9 + 'rpx'
				} else {
					return '1250rpx'
				}

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

			},
		},
		onLoad() {
			// 计算屏幕高度 ，宽度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					_this.phoneWidth = res.windowWidth
				}
			});
			this.getLocation()
		},
		methods: {
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						that.nowLocation.longitude = res.longitude
						that.nowLocation.latitude = res.latitude
						that.covers[0].longitude = res.longitude
						that.covers[0].latitude = res.latitude
						console.log('获取位置数据：', res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						//拼接当前定位回显地址
						// let _address = res.address
						// this.address = _address
					}
				});
			},
			tap(e) {
				this.longitude = e.detail.longitude;
				this.latitude = e.detail.latitude;
				console.log(this.longitude)
				console.log(this.latitude)

			},
			config() {
				uni.navigateTo({

				})
			}
		}
	}
</script>

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

	.bottom {
		width: 750rpx;
		flex: 1;
		background: white;
		position: fixed;
		bottom: 54rpx;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 84rpx;
		align-items: center;
	}

	.title-style {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.bottom-text{
		
	}
	.config{
		background:#22C572 ;
	}
</style>