BD-LDBD-UNI/pages/shop/navigation/navigation.vue

<template>
	<view>
		<map class="mapStyle" :markers="markers" :latitude="latitude" :longitude="longitude"></map>
		<view class="shopInfo">
			<view>
				<view class="shopName">{{shopName}}</view>
				<view class="shopAddress">
					<view>{{address}}</view>
					<view>距离{{distance}}km</view>
				</view>
			</view>
			<view class="toNavi" @click="toCall()">去导航</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude:'',
				markers:[{
					latitude:'',
					longitude:'',
					width:100,
					height:100,
					iconPath:'../../../static/dianpu.png',
				}],
				shopName:'',
				address:'',
				distance:'',
				phone:''
			};
		},
		onLoad(options) {
			console.log(options);
			this.latitude = options.latitude,
			this.longitude = options.longitude
			this.markers[0].latitude = options.latitude,
			this.markers[0].longitude = options.longitude
			this.shopName = options.shopTitle
			this.address = options.address
			this.distance = options.distance
			this.phone = options.phone
		},
		methods:{
			toCall(){
				let dst = new plus.maps.Point(this.longitude,this.latitude)
				let src = new plus.maps.Point(this.longitude,this.latitude)
				plus.maps.openSysMap(dst,this.shopName,src)
			}
		}
	}
</script>

<style lang="less">
.mapStyle{
	width: 100%;
	height: 86vh;
}
.shopInfo{
	width: 100%;
	height: 14vh;
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.shopName{
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 50rpx
	}
	.shopAddress{
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 10rpx;
		margin-left: 50rpx;
		color: #999999;
	}
	.toNavi{
		width: 200rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 40rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 80rpx;
		margin-right: 50rpx;
	}
}
</style>