微信小程序绘制轨迹

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 = thisvm.$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].lngthis.latitude = vm.latList[0].latvm.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、调用方法后地图轨迹就渲染出来啦