uniapp 地图行车轨迹

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>
1
2
3
4
5
6
7
8
9
10

// 地图实例
onReady() {
	this._mapContext = uni.createMapContext("largeScreenMap", this);
}
1
2
3
4

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 }
    }
});
1
2
3
4
5
6
7
8
9
10

3、画路线

// 路线
let polyline = [{
    width: 8,
    points: [], // 经纬度数组 [{latitude: 0, longitude: 0}]
    arrowLine: true, //带箭头的线
    color: '#3591FC', // 线的颜色
}]
1
2
3
4
5
6
7

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
        }
    }
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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覆盖 ，二选一
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

自定义气泡窗口参考：uniapp map自定义气泡窗