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

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

<script>
	import googleMap from "@/component/googleMap/googleMap";
	// component/nomore/nomore.js
	export default {
		components: {
			googleMap,
		},
		data() {
			return {};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			longitude: {
				type: String,
				default: ''
			},
			latitude: {
				type: String,
				default: ''
			},
			carAddress: {
				type: String,
				default: ''
			},
			carLocation:{
				type:Array,
				default:[]
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			navCarLocation(){
				const me=this
				uni.navigateTo({
					url: '/pages/carLocation/carLocation?longitude=' + me.longitude +'&latitude=' + me.latitude,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			}
		}
	};
</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;
}
.top-car-location{
	margin: 15rpx 0 0 15rpx;
	align-items: center;
	font-weight: 600;
	font-size: 28rpx;
	color: #060809;
}
.car-address{
	font-weight: 400;
	font-size: 28rpx;
	color: #060809;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	width: 300rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #F4F5F6;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	margin-top: 8rpx;
}
</style>