百度地图Marker平滑移动

最新推荐文章于 2022-11-13 23:55:53 发布

珠珠珠啊珠珠珠

最新推荐文章于 2022-11-13 23:55:53 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java基础

本文链接：https://blog.youkuaiyun.com/qq_39782876/article/details/83892814

本文介绍如何实现在百度地图上，根据实时位置数据使Marker平滑移动。通过将大步长分解为小步长，避免Marker在移动过程中的跳跃。通过经纬度到平面坐标的转换，并使用定时请求更新位置，确保Marker平滑过渡。文中提到了在转换过程中遇到的问题及解决方案，参考了三位博主的文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码参考了三位大佬的文章，文章末尾会附链接

功能要求：实时从后台获取位置数据，然后标注在地图上，Marker从一个点到另个点之间要平滑移动，不能出现蹦蹦跳跳的情况。

实现思想：之所以会出现Marker跳动的情况，是因为每次迈的步子过大，或者说是距离过长，如果能把每段的距离都分成更多段更小的距离，这样Marker可以慢慢地小碎步移动过去，这样从视觉上来看就是平滑地移动过去。既然是要把两点之间的距离分成更多更小的距离，那么就存在一个问题：获取到的经纬度是球面坐标，而我要划分更多段，那就需要把获取到的经纬度先转换成平面坐标。

定时请求位置数据，每次取两个点，比如，第一个点和第二个点，第二个点和第三个点，第三个点和第四个点.............

实现代码如下

/**
     * 两点之间平滑移动
     * gaoxingzhu
     * @param prvePoint 起点坐标
     * @param newPoint 终点坐标
     * @param timer 两点之间要移动的次数
     * @param marker Marker图标
     * @param count 每次移动的时间(毫秒)
     */
    function moveCar(prvePoint, newPoint, timer,marker,count){
        var _prvePoint = new BMap.Pixel(0,0); //Pixel表示地图上的一个点，单位为像素
        var _newPoint = new BMap.Pixel(0,0);
        var currentCount = 0;//当前帧数
        var projection =new BMap.MercatorProjection();
        var _prvePoint = projection.lngLatToPoint(prvePoint);
        var _newPoint = projection.lngLatToPoint(newPoint);
        var interva