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

<template>
	<view class="container">
		<view class="content">
			<map class="map" @markertap="markertap" :latitude="nowLocation.latitude" :longitude="nowLocation.longitude"
				:markers="covers">
			</map>
		</view>
		<view class="bottom">
			<view class="title Medium">
				{{dataList.title}}
			</view>
			<view class="bottom-content Regular">
				{{dataList.content}}
			</view>
			<view class="Regular location">
				<view class="left">
					<u-icon name="map" size="36" class="icon"></u-icon>
					<view>{{dataList.localtion}}</view>
				</view>
				
				<view class="metre">
				<u-line color="#A3A9B8" direction='col' length="20rpx"/>
				<text  class="line" >
				{{dataList.rice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: {
					title: '中天昊元粮库中天昊元粮库',
					content: '我是企业介绍我是企业介绍我是企业介绍我是企业介绍我是企业介绍…',
					localtion: "辽宁省营口市鲅鱼圈区熊岳镇火车站…",
					rice: '500m'
				},
				nowLocation: {
					longitude: '',
					latitude: ''
				},
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 0,
					latitude: 39.9085,
					longitude: 116.39747,
					iconPath: '../../../static/img/location.png',
				}]
			}
		},
		onLoad() {
			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
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.bottom {
		width: 96%;
		background: white;
		position: fixed;
		bottom: 54rpx;
		left: 0;
		right: 0;
		margin: auto;
		padding: 27rpx 37rpx;

		.title {
			font-size: 30rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}

		.bottom-content {
			font-size: 22rpx;
		}

		.location {
			color: #AFB3BF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 15rpx;

			.left {
				display: flex;
				flex-wrap: nowrap;
			}
			.metre{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.line{
					margin-left:13rpx ;
				}
			}
		}
	}
</style>