资讯专栏INFORMATION COLUMN

腾讯地图实现轨迹回放

leejan97 / 721人阅读

摘要:为什么使用腾讯地图百度高德地图,商业需要授权年。轨迹回放腾讯也有方法,我是参考高德的地图对比腾讯地图才知道怎么使用可能还是文档不太熟,之前提交工单问客服有没有轨迹回放功能,客服直接回答没有。

为什么使用腾讯地图?

百度、高德地图,商业需要授权5W/年。土豪可以直接使用百度、高德,文档详细方法全,腾讯免费但是方法不全。

轨迹回放

腾讯也有方法,我是参考高德的地图对比腾讯地图才知道怎么使用(可能还是文档不太熟,之前提交工单问客服有没有轨迹回放功能,客服直接回答*没有*)。
轨迹回放高德、百度有写好的案例 https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data/?sug_index=6


直接上代码:

let i=[{
                lng: 113.97178462529953,
                lat: 22.533004760109772,
            }, {
                lng: 113.97178462529953,
                lat: 22.533004760109772,
            }, {
                lng: 113.97227964419012,
                lat: 22.53297604020109,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }, {
                lng: 113.9727937028104,
                lat: 22.532843370121697,
            }]
let p = [];
      i.forEach(e => {
        p.push(new qq.maps.LatLng(e.lat, e.lng));
   });

//设置图标
this.marker1 = new window.qq.maps.Marker({
        position: p[0],
        map: this.map,
        autoRotation: true
});
//画出轨迹
this.polyline = new qq.maps.Polyline({
        path: p,
        strokeColor: "#28F",
        strokeWeight: 6,
        editable: false,
        map: this.map
});
//图标沿着轨迹移动
that.marker1.moveAlong(p, 80);

这样就可以实现沿着轨迹移动


有一个问题:

用官方的图标没问题,使用自定义图标,如上图,垂直的状况,暂时无法解决,旋转角度也不行。
在 qq.maps.MarkerOptions 中设置 autoRotation (点标记在使用moveTo、moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认为false。)
这个无效,如果有解决办法可以告知我一下。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105768.html

相关文章

  • 轨迹回放

    摘要:根据业务场景结合在百度的中新增一些回调属性如进行回放进度回放速度的控制涉及到的交互及限制回放进度暂停时拖动,播放中无法控制回放速度移动中需要到下一个坐标点,若距离太长两点之间无法变更速度测试数据中相邻坐标点的间隔不匀会导致进度条的快慢不等进 根据业务场景结合vue+iview在百度lushu的prototype中新增一些回调属性如:_pauseCallback、_endCallback...

    raoyi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<