描述:使用高德地图,加载一个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);