前端使用高德地图加载图标实现图标上下跳跃效果

jojo是只猫

已于 2023-03-24 15:17:07 修改

阅读量600

点赞数

文章标签：前端

于 2023-03-22 15:57:53 首次发布

本文链接：https://blog.csdn.net/weixin_42496938/article/details/129711050

版权

本文介绍了如何在高德地图上创建一个Marker并使其动起来，通过设置Icon、添加点击事件以及使用GSAP库来实现Marker的跳动动画效果。文章还提供了安装和引用GSAP的步骤，以及动画配置的详细参数。

摘要由CSDN通过智能技术生成

描述：使用高德地图，加载一个marker，让marker能动起来，实现动态效果

一、先加载maker

const icon = new AMap.Icon({
    size: new AMap.Size(40, 50),    // 图标尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});
const marker = new AMap.Marker({
   position: [120,30], // 经纬度
   opacity: 1,
   anchor: 'bottom-center', // 点标记锚点的不同方位
   icon: icon,
 });
marker.on('click', (e) => {
  // marker的点击事件 
 });
 // marker加上class，默认.amap-icon
marker.dom.classList.add('custom-class') 
map.add(marker); // marker加到地图上

注意：new AMap.Marker的方式只能到map上，如果先加到自定义的group上，再将group加到map上不生效

二、使用gsap

1、安装gsap

npm install gsap
或
yarn add gsap

2、引用

import { gsap } from 'gsap';

3、使用

// 加跳动动画
setTimeout(() => {
  gsap.to('.amap-icon', { // class
    'margin-top': -10, // 上下跳动高度
    duration: 0.5, // h动画持续多长时间
    repeat: -1, // 动画重复的次数。
    yoyo: true, // 如果为true，则每次重复播放都会前后交替进行
  });
}, 500);