zx_flk_app/pages/index/components/mapCard/mapCard.vue

<template>
	<view class="container-view-car" @tap="navCarLocation">
		<!-- #ifdef APP -->
		<view :style="{width:'100%',height: height?'258rpx':'140rpx'}" class="map">
			<cover-view v-if="!isShowReturnCar"  class="top-car-location">
				<cover-image class='img' style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FrKY7Ex5za22plr39ddIsJcjFVpi" ></cover-image>
				<cover-view class="text">{{ $t('车辆位置') }}</cover-view>
			</cover-view>
			<googleMap keyId="1" width='100%' :height="height?'258rpx':'140rpx'" v-if="car_info.latitude"  :mapData="{type:3}" :myLocations='{
				longitude:car_info.longitude,
				latitude:car_info.latitude
			}'></googleMap>
		</view>
		
		<!-- #endif -->
		<!-- #ifndef APP -->
		<map class="map"  :longitude="car_info.longitude"
			:latitude="car_info.latitude" scale="16" show-location :style="{width:'100%',height: height?'258rpx':'140rpx'}" :markers="carLocation">
			<view  class="top-car-location flex-row">
				<img style="width: 36rpx;height: 36rpx;" src="https://qiniu.bms16.com/FrKY7Ex5za22plr39ddIsJcjFVpi" alt="">
				<text>{{ $t('车辆位置') }}</text>
			</view>
		</map>
		<!-- #endif -->
		<view class="car-address">{{carAddress}}</view>
	</view>
</template>

<script>
	const http = require('@/common/request.js');
	const config = require('@/common/config.js');
	import googleMap from "@/component/googleMap/googleMap";
	// component/nomore/nomore.js
	export default {
		components: {
			googleMap,
		},
		data() {
			return {
				carAddress:this.$t('未知'),
				carLocation:[]
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			
			car_info: {
				type: Object,
				default: {}
			},
			height: {
				type: Boolean,
				default: true
			},
			isShowReturnCar: {
				type: Boolean,
				default: true
			},
		},
		
		mounted() {
			this.carLocation = [
				{
					id: 1345,
					latitude: this.car_info.latitude,
					longitude: this.car_info.longitude,
					iconPath: 'https://qiniu.bms16.com/FjzP68_NSPJbde_JraN5dJRnyqqJ',
					width: 60,
					height: 60,
				}
			],
			this.getAddressName(this.car_info.latitude,this.car_info.longitude)
			
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			navCarLocation(){
				const me=this
				uni.navigateTo({
					url: '/pages/carLocation/carLocation?longitude=' + me.car_info.longitude +'&latitude=' + me.car_info.latitude,
				});
			},
			async getAddressName(latitude, longitude) {
				const that = this
				//#ifdef MP-ALIPAY
				var _pi = "ali_index"
				//#endif
				//#ifdef MP-WEIXIN
				var _pi = "wx_index"
				//#endif
				//#ifdef APP
				var _pi = "APP"
				//#endif
				const location = {
					lat: that.car_info.latitude,
					lng: that.car_info.longitude,
					pi: _pi
				}
				let {data} = await http.postApi(config.API_MAP_REGEO, location)
				if(data.code == 200){
					this.carAddress = data.data.data.address
				}
			},
		}
	};
</script>
<style scoped>
.container-view-car{
	 background-color: #FFF;
	 border-radius: 40rpx;
	 width: 100%;
	 padding: 8rpx;
}
.map{
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.top-car-location{
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	margin: 15rpx 0 0 15rpx;
	display: flex;
	align-items: center;
}
.top-car-location .text{
	line-height: 1;
	color: #060809;
	font-weight: 500;
	font-size: 28rpx;
	height: 36rpx;
	margin-left: 10rpx;
}
.top-car-location .img{
	display: block;
}
.car-address{
	font-weight: 400;
	font-size: 28rpx;
	color: #060809;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	width: 324rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #F4F5F6;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	margin-top: 8rpx;
	padding-left: 8rpx;
}
</style>