天地图打点自定义图标加css动画效果
时间: 2023-08-15 15:04:20 浏览: 239
AntDesign+TS实现天地图打点定位组件
您可以按照以下步骤实现天地图打点自定义图标加CSS动画效果:
1. 首先,您需要在天地图上添加一个标记。您可以使用`addMarker`函数来实现。例如:
```javascript
var marker = new T.Marker(new T.LngLat(116.404, 39.915), {
icon: new T.Icon({
iconUrl: 'your-icon-url',
iconSize: new T.Point(32, 32),
iconAnchor: new T.Point(16, 16)
})
});
map.addOverLay(marker);
```
2. 接下来,您需要在CSS中创建一个动画。例如,您可以使用以下代码创建一个旋转动画:
```css
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
```
3. 最后,您可以将动画应用到图标上。例如,您可以使用以下代码将旋转动画应用到标记上:
```javascript
marker.getIcon().div_.classList.add('rotate');
```
这将为图标添加一个名为“rotate”的类,该类将应用旋转动画。
希望这对您有所帮助!
阅读全文