微信小程序绘制轨迹

最新推荐文章于 2025-07-10 10:44:29 发布

lucky*girl

最新推荐文章于 2025-07-10 10:44:29 发布

阅读量988

点赞数 8

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_44409569/article/details/143059436

1、map | uni-app官网

根据官网描述：通过从数据库获取POI数据，并通过 uni-id-common 内的路线规划API，计算路线、距离、时间。

2、

<map style="width:100%;height:96%;" id="myMap" :scale="scale" :longitude="longitude" :latitude="latitude"
					:markers="markers" :polyline="polyline"></map>

先绘制地图。

3、注意先添加腾讯地图的JS文件

import QQMapWX from '@/util/qqmap-wx-jssdk1.2/qqmap-wx-jssdk';

4、轨迹和图标渲染

seelat(boxNo, orderContainerId) {
				const vm = this
				vm.$service.thirdTrackInfo({
					boxNo: boxNo,
					orderContainerId: orderContainerId,
					orderId: vm.transportOrderId
				}).then(res => {
					if (res.code == 200) {
						vm.latList = res.data ? res.data : []
						vm.polyline = []
						vm.markers = []
						if (vm.latList.length > 0) {
							let arrPosi = []
							let arrPloy = []
							this.longitude = vm.latList[0].lng
							this.latitude = vm.latList[0].lat
							vm.latList.forEach(item => {
								let obj = {
									latitude: item.lat,
									longitude: item.lng
								}
								arrPloy.push(obj)
							})
							this.polyline = [{
								points: arrPloy,
								color: '#FF0000DD',
								width: 4,
								dottedLine: false
							}];
							this.markers = [{
									iconPath: 'https:/front/end.png',
									id: 0,
									latitude: vm.latList[0].lat,
									longitude: vm.latList[0].lng,
									width: 50,
									height: 50
								},
								{
									iconPath: 'https:/back/start.png',
									id: 1,
									latitude:vm.latList.length > 0 ? vm.latList[vm.latList.length - 1].lat : '',
									longitude:vm.latList.length > 0 ? vm.latList[vm.latList.length - 1].lng: '',
									width: 50,
									height: 50
								}
							]
						}
					}
				})
			},

5、调用方法后地图轨迹就渲染出来啦