uniapp 地图行车轨迹
文章目录
-
- uniapp 地图行车轨迹
-
- 1、画地图
- 2、切换地图中心点
- 3、画路线
- 4、轨迹移动
- 5、标记点及自定义内容
uniapp 地图行车轨迹
官网地图组件：https://uniapp.dcloud.net.cn/component/map.html
官网地图组件控制：https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext
1、画地图
<map class="positioning-map"
id="largeScreenMap"
:latitude="中心纬度"
:longitude="中心经度"
:scale="5"
:include-points="polyline[0].points"
:markers="标记点"
:polyline="路线"
@markertap="点击标记点时触发"
>map>
// 地图实例
onReady() {
this._mapContext = uni.createMapContext("largeScreenMap", this);
}
2、切换地图中心点
// 获取当前位置
uni.getLocation({
type: 'wgs84',
success: function (res) {
let { longitude, latitude } = res
// 将地图中心移动到当前定位点，需要配合map组件的show-location使用
_this._mapContext.moveToLocation({ longitude: +longitude, latitude: +latitude })
_this.mapCenter = { lat: latitude, lng: longitude }
}
});
3、画路线
// 路线
let polyline = [{
width: 8,
points: [], // 经纬度数组 [{latitude: 0, longitude: 0}]
arrowLine: true, //带箭头的线
color: '#3591FC', // 线的颜色
}]
4、轨迹移动
// nextPoint 下一个点,moving 是否继续行驶-用于暂停行驶
movePoint(){
if(!this.polyline[0] return;
let durationTime = Math.ceil(30000 / polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
this._mapContext.translateMarker({ // 平移marker，带动画
duration: durationTime,
markerId: '当前标记点的id',
destination: { // 指定 marker 移动到的目标点
latitude: this.polyline[0].points[this.nextPointIndex].latitude,
longitude: this.polyline[0].points[this.nextPointIndex].longitude
},
animationEnd: res => { // 动画结束回调函数
//播放结束，继续移动到下一个点，最后一个点时结束移动
if (this.nextPoint < polyline[0].points.length - 1) {
this.nextPoint++
if (this.moving) {
this.movePoint()
}
} else {
this.nextPoint = 1
}
}
})
}
5、标记点及自定义内容
let marker=[
{
id: number-必填,
latitude: '纬度',
longitude: '经度',
width: 18, height: 25,
callout:{ content: '结束',// 开始
bgColor: '#ffffff',
padding: 4,
borderRadius: 3,
display: 'ALWAYS'},// '自定义标记点上方的气泡窗口'- 纯文本内容 - content 显示标记内容，二选一
customCallout:{name:'需要的数据',display: 'BYCLICK'},// '自定义气泡窗口' - 自定义窗口内容 - 使用cover-view覆盖 ，二选一
}
]
自定义气泡窗口参考：uniapp map自定义气泡窗