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、调用方法后地图轨迹就渲染出来啦