JiangxiMiniProgram/components/pozCard/pozCard.vue

<template>
	<view class="card">
		<view class="flex-b" @click="openMap">
			<view class="left_text">
				<view class="adr ">江西省江西市江西区某某镇尚坤丁兰国际1190号820</view>
				<view class="distance">距您100km</view>
			</view>
			<view class="mapEntry">
				<view class="icon">
					<image src="@/static/images/index/mapIcon.png" mode=""></image>
				</view>
				<view class="text">地图导航</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			openMap() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 24rpx;
	  .flex-b {
		  align-items: center;
	    .left_text {
			flex: 1;
	      .adr {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
	      }
		
	      .distance {
			margin-top: 24rpx;
			color: #686B73;
			font-size: 24rpx;
	      }
	    }
		
	    .mapEntry {
			width: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
	      .icon {
	        width: 32rpx;
			height: 32rpx;
	      }
		
	      .text {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: $themC;
	      }
	    }
	  }
	}
</style>