1

为什么使用腾讯地图?

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

轨迹回放

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

clipboard.png
直接上代码:

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);

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

clipboard.png
有一个问题:

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

备胎
43 声望0 粉丝