天地图Marker跳一跳动画

天地图的Marker点终于也能实现"跳一跳"啦!虽然天地图官方API目前没有直接提供Marker点跳动的现成方法,但我们可以借助一些技术手段来实现这一效果。

效果图
核心方法
typescript 复制代码
function handleMarkerJumpAnimation(marker, options) {
    var {
        jumpHeight = 0.0005,  // 弹跳高度(经纬度偏移量)
        steps = 25,          // 动画步数
        total = 1, // 执行次数
    } = options;
    // 弹跳动画参数
    var curLngLat = marker.getLngLat();
    marker.setLngLat (curLngLat)
    var curLngLat = marker.getLngLat();
    var targetLngLat = new T.LngLat(curLngLat.lng, curLngLat.lat + jumpHeight);
    // 当前状态
    var currentStep = 0;
    var animationId;
    function animate() {
        if (currentStep < steps) {
            // 计算新的位置
            var progress = currentStep / steps;
            var newLat = curLngLat.lat + (targetLngLat.lat - curLngLat.lat) * progress;
            var newLngLat = new T.LngLat(curLngLat.lng, newLat);
            marker.setLngLat(newLngLat);

            currentStep++;
            animationId = requestAnimationFrame(animate);  // 使用 requestAnimationFrame 继续动画
        } else {
            // 动画结束,恢复初始位置
            marker.setLngLat(curLngLat);
            cancelAnimationFrame(animationId);
            if (total === 0) {
                animate = null;
                animationId = null;
                return;
            }
            total--
            currentStep = 0;
            animate();
        }
    }
    animate();  // 开始动画
}
使用
typescript 复制代码
// 创建标注对象
var marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
// 向地图上添加标注
map.addOverLay(marker);
// 调用跳一跳方法
handleMarkerJumpAnimation(marker, {});
相关推荐
小高0072 分钟前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
Hashan3 分钟前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js
前端Hardy17 分钟前
轻松搞定JavaScript数组方法,面试被问直接答!
前端·javascript·面试
云枫晖26 分钟前
手写Promise-catch和finally
前端·javascript
薄雾晚晴30 分钟前
大屏开发实战:封装自动判断、无缝衔接的文字滚动组件,告别文本截断烦恼
前端·javascript·vue.js
Beginner x_u1 小时前
前端八股文 Vue上
前端·javascript·vue.js·八股文
Strawberry_rabbit1 小时前
Docker
前端
前端康师傅1 小时前
JavaScript数组中的陷阱
前端·javascript
用泥种荷花1 小时前
【web音频学习(七)】科大讯飞Web端语音合成
前端
月弦笙音1 小时前
【class 】static与 # 私有及static私有:系统梳理
前端·javascript·面试