uniapp+地图 实现目的地导航

uniapp小程序实现导航功能，以下是效果图

代码标注如图所示，配置的话，请参考上一篇文章uniapp+腾讯地图定位获取位置信息

代码附上

<template>
	<view>
		<view class="map-container">
			<map :longitude="longitude" :latitude="latitude" :scale="scale" @markertap="showLocationInfo" class="map"
				:markers="markers">
			</map>
		</view>
	</view>
</template>
 
<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	const longitude = ref(104.065867) // 经度
	const latitude = ref(30.657627) // 纬度
	const scale = ref(10) // 缩放级别
	const markers = ref([{
			id: 1,
			longitude: 104.049391,
			latitude: 30.683977,
			title: '花牌坊',
			iconPath: '../../static/images/1-1.jpg',
			address: '花牌坊地铁口A口',
			width: 30,
			height: 30
		},
		{
			id: 2,
			longitude: 104.042178,
			latitude: 30.639979,
			title: '高升桥',
			iconPath: '../../static/images/1-2.jpg',
			address: '高升桥地铁口A口',
			width: 30,
			height: 30
		},
	])
	const showInfo = ref(false)
	const showLocationInfo = (e) => {
		console.log(e);
		const markerId = e.markerId
		const clickedMarker = markers.value.find((item) => item.id === markerId);
		uni.openLocation({
			latitude: parseFloat(clickedMarker.latitude), // 要去的地址经度，浮点数
			longitude: parseFloat(clickedMarker.longitude), // 要去的地址纬度，浮点数
			name: clickedMarker.title, // 位置名
			address: clickedMarker.address, // 要去的地址详情说明
			scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
		});
		// 拼接腾讯地图的 URL Scheme，传递经度、纬度、位置名和地址等参数
		const url = `http://map/routeplan?type=drive&to={{clickedMarker.title}}&tocoord=30.683977,104.049391`;
		// 使用 wx.openDocument 打开 URL，自动跳转到腾讯地图软件
		uni.openDocument({
			filePath: url,
		});
	};
 
	onMounted(() => {
		const mapCtx = uni.createMapContext('myMap');
		console.log(mapCtx); // 可在此处使用 mapCtx 进行其他操作
	});
</script>
 
<style>
	.map {
		width: 100%;
		height: 200px;
	}
</style>

希望可以有帮助