高德地图api给点设置闪烁动画

贺今宵

于 2023-08-29 16:51:32 发布

阅读量984

点赞数 3

分类专栏： map 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_51389137/article/details/132565195

版权

map 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

首先高德提供了点动画两种选择和掉落弹跳，可以在属性中定义也可以setAnimation

但是没闪烁

所以css，遍历所有点标记找到要闪烁的点给一个class在deepcss一个动画

js
function setshadow(params) {
//获取地图所有点标记
  let data = map.getAllOverlays("marker");

  data.forEach((item) => {
    if (item._opts.myCode === "QYD") {
//给class还可以remove移除
      item.dom.classList.add("abnormal_marker");
    }
  });
}

css
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
:deep(.abnormal_marker) {
  animation: blink 1.5s infinite;
}