uniapp 地图行车轨迹

文章目录

uniapp 地图行车轨迹

官网地图组件:https://uniapp.dcloud.net.cn/component/map.html

官网地图组件控制:https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext

1、画地图

html 复制代码
<map class="positioning-map"
     id="largeScreenMap"
     :latitude="中心纬度"
     :longitude="中心经度"
     :scale="5"
     :include-points="polyline[0].points"
     :markers="标记点"
     :polyline="路线"
     @markertap="点击标记点时触发"
></map>
js 复制代码
// 地图实例
onReady() {
	this._mapContext = uni.createMapContext("largeScreenMap", this);
}

2、切换地图中心点

js 复制代码
// 获取当前位置
 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、画路线

js 复制代码
// 路线
let polyline = [{
    width: 8,
    points: [], // 经纬度数组 [{latitude: 0, longitude: 0}]
    arrowLine: true, //带箭头的线
    color: '#3591FC', // 线的颜色
}]

4、轨迹移动

js 复制代码
// 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、标记点及自定义内容

js 复制代码
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自定义气泡窗

相关推荐
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
css趣多多12 小时前
使用git管理uniapp项目
uni-app
前端小雪的博客.1 天前
Uniapp 小程序复制、粘贴功能实现
小程序·uni-app
竣子好逑1 天前
uniapp v2 组件
前端·uni-app
筱歌儿1 天前
uniapp 阿里云点播 播放bug
uni-app·bug
陆康永1 天前
uniapp-X 对象动态取值
uni-app
林涧泣1 天前
【Uniapp-Vue3】登录成功后获取当前用户信息并渲染到页面中
前端·javascript·uni-app
前端小雪的博客.1 天前
Uniapp 小程序接口封装与使用
微信小程序·uni-app
离别又见离别1 天前
uniapp 本地数据库多端适配实例(根据运行环境自动选择适配器)
数据库·vue.js·sqlite·uni-app·db
香菜的开发日记1 天前
uniapp 系统学习,从入门到实战(四)—— 页面与路由管理
uni-app