Android 百度地图定时器轨迹回放,进度条和播放顺序

本文介绍了如何在Android应用中利用后台返回的打点数据实现轨迹回放,包括带动画的轨迹展示、进度条以及前进后退功能。示例代码展示了关键实现步骤,虽然部分细节如样式和方法未详述,但提供了核心逻辑。
摘要由CSDN通过智能技术生成

目前需要做这样一个需求,后台返回一堆打点数据,要求Android端实现轨迹回放功能,带动画的那种,还需要进度条,支持前进后退,先上图,看是否是你需要的功能。

不多说直接上代码,目前的经纬度先使用类写死

TrackRecordActivity.class

public class TrackRecordActivity extends BaseFatherFragmentActivity implements
        BaiduMap.OnMapLoadedCallback,
        BaiduMap.OnMapStatusChangeListener,
        BaiduMap.OnMarkerClickListener,
        BaiduMap.OnMapClickListener {
    @BindView(R.id.tvTextTitle)
    TextView tvTextTitle;
    @BindView(R.id.btnTitleBack)
    ImageButton btnTitleBack;
    @BindView(R.id.baiduMap)
    MapView baiduMapView;
    @BindView(R.id.layoutBaidu)
    FrameLayout layoutBaidu;
    @BindView(R.id.view_control)
    View view_control;
    @BindView(R.id.iv_forward)
    ImageView iv_forward;
    @BindView(R.id.iv_play)
    ImageView iv_play;
    @BindView(R.id.iv_next)
    ImageView iv_next;

    @BindView(R.id.seekbar_play)
    SeekBar seekbar_play;
    @BindView(R.id.tv_mark_time)
    TextView tv_mark_time;
    private int playProgress;

    private BaiduMap baiduMap;
    private MyLocationListenner myListener = new MyLocationListenner();
    private LocationClient mLocClient;

    private BDLocation myLocation;
    private int mapFitZoom = 10;

    private String mDevCode;
    private String trackRecodeId;
    private List<Marker> markers;

    private boolean isPlayTrack = false;
    private LatLng playPosition = null;
    private List<HistoryLocationBean> historyLocationBeans = new ArrayList<>();
    private List<LatLng> routeList = new ArrayList<>();// 路线点的集合

    private int routeIndex;
    private boolean routeFlag;
    private final int ROUTE = 0;

    private Marker routeMarker;
    private int ROUTETIME = 500;
    private Handler mHandler = new Handler() {
        public void handleMessage(Message msg) {
            if (msg.what == ROUTE) {
                mHandler.sendEmptyMessage(PROGRESS);
                if (routeIndex == routeList.size() - 1) {
                    isPlayTrack = false;
                    routeFlag = false;
                    iv_play.setImageResource(R.drawable.ic_player_start);
                    AppLog.Loge("播放完毕");
                    routeIndex = 0;
                    if (routeMarker != null) {
                        routeMarker.remove();
                        routeMarker = null;
                    }
//                    addRouteLine(routeList);
                    //画路线
                    if (routeList.size() > 0) {
                        addMarker(routeList);
                    }
//                    drawMyRoute(routeList);
                    return;
                }
                if (routeIndex != 0) {
                    isPlayTrack = true;
                    //画路线
                    drawMyRoute(routeList.subList(0,
                            routeIndex+1));
                    //描点
                    playPosition = routeList.get(routeList.size()-1);
                    drawMapMarkView();
//                    //描起点
                    needAddMapMark(routeList.get(0),0);
                }
                // 页面跟随移动,注掉这行就是在原图上绘制
//                 moveToLocation(routeList.get(routeIndex), false);
                if (routeMarker == null) {

                    Bitmap bitmap1= BitmapFactory.decodeResource(getResources(),R.drawable.track_run);
                    BitmapDescriptor bitmap = BitmapDescriptorFactory.fromBitmap(AppUtils.imageScale(bitmap1,AppUtils.dp2Px(TrackRecordActivity.this,27),
                            AppUtils.dp2Px(TrackRecordActivity.this,38)));

                    //构建MarkerOption,用于在地图上添加Marker
                    OverlayOptions option = new MarkerOptions()
                            .position(routeList.get(routeIndex++))
                            .icon(bitmap);
                    //在地图上添加Marker,并显示
                    routeMarker = (Marker) baiduMap.addOverlay(option);

                } else {
                    routeMarker.setPosition(routeList.get(routeIndex++));
                }

                routeMarker.setToTop();
                routeMarker.setDraggable(false);//设置 marker 是否允许拖拽,默认不可拖拽
                routeMarker.setPerspective(false);//设置是否开启 Marker 覆盖物近大远小效果,默认开启
//                setUserMapCenter(routeList.get(routeIndex), mapFitZoom);

                mHandler.sendEmptyMessageDelayed(ROUTE, ROUTETIME);
            }

            if (msg.what == PROGRESS) {
                if (routeIndex == 0) {// 因为播放完毕时routeIndex被赋值成了0,不写进度条会直接跳到0的位置
                    setProgss(100);
                } else {
                    setProgss((routeIndex + 1) * 100 / routeList.size());
                }
            }
        };
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ac_track_record);
        ButterKnife.bind(this);
        initVariable();
        setViews();
        setClick();
        initSeekBar();

        updatePlayMarkUi(false);

        getData();
    }

    @Override
    protected void onStart() {
        super.onStart();
        if (!mLocClient.isStarted()) {
            mLocClient.start();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        mLocClient.stop();
    }

    private void initSeekBar() {
        seekbar_play.setMax(100);
        seekbar_play.setProgress(0);
        playProgress = seekbar_play.getProgress();
        seekbar_play.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
                playProgress = progress ;
                AppLog.Loge("移动的进度为:"+progress);
                if (!isPlayTrack){//播放过程中无效
                    int selectIndex = 0;
                    if(routeList!=null && routeList.size()>0){
                        float seachPoi = (float) ((progress*routeList.size())/100.0);
                        if((seachPoi-(int)seachPoi)>0.5){
                            selectIndex = (int)seachPoi+1;
                        }else{
                            selectIndex = (int)seachPoi;
                        }
                        //防止溢出
                        if(selectIndex >= routeList.size()-1){
                            selectIndex = routeList.size()-1;
                        }
                    }
                    routeIndex = selectIndex;
                    AppLog.Loge("实际选择的下标为:"+routeIndex);
                    //描点
                    playPosition = routeList.get(selectIndex);
                    drawMapMarkView();
                }
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
    }

    private void initVariable() {
        markers = new ArrayList<>();
        Intent intent 
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个用于构建用户界面的开源JavaScript框架,可以简化开发过程并提高开发效率。百度地图JS API是百度地图提供的一套JavaScript API,可以在网页中集成地图功能。轨迹回放是指根据已经记录的轨迹数据,将轨迹在地图上以动画的形式重新播放出来。 在Vue中使用百度地图JS API进行轨迹回放,首先需要在Vue项目中引入百度地图的JS文件,并在Vue实例的mounted钩子函数中初始化地图。 在获取到轨迹数据后,可以使用百度地图提供的Polyline类创建一个折线对象,并将轨迹点添加到折线对象中。然后使用地图的addOverlay方法将折线对象添加到地图上,实现轨迹的显示。 为了实现轨迹回放效果,可以使用Vue定时器函数setInterval来定时改变折线对象的显示范围,从而实现轨迹的动画效果。可以通过设置折线对象的路径切片来控制每次显示的轨迹点数量,并随着时间的推移逐渐增加显示的点数,从而实现回放效果。 同时,为了提高回放的流畅度和体验,可以使用百度地图提供的动画效果类Effect来给轨迹点添加动画效果,比如平滑移动、旋转等,使得轨迹回放更加真实。 总而言之,利用Vue百度地图JS API,可以很方便地实现轨迹回放功能。通过初始化地图、创建折线对象、定时改变折线对象的显示范围,再加上动画效果的设置,就能够实现一个带有回放功能的轨迹展示页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值