百度地图 api 自定义标注点动画

大话_絮

已于 2023-11-01 17:02:34 修改

阅读量868

点赞数 3

文章标签： html5 javascript

于 2023-11-01 17:01:56 首次发布

本文链接：https://blog.youkuaiyun.com/lll11122222/article/details/134165228

版权

本文介绍了如何在百度地图API中通过JavaScript自定义标注点的动画效果，包括初始化marker、创建自定义图层DOM并添加动画关键帧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图 api 自定义标注点动画

直接使用因为 PC 端不能调用动画，所以只能自己写一层（纯 js）

具体如何初始化，查看官方文档 api 链接地址https://lbsyun.baidu.com/index.php?title=jspopularGL

1、先调用初始化百度的 maker

const marker = new BMapGL.Marker(point, { icon: myIcon }) // 创建标注

2、自定义图层 dom

let divElement = document.createElement("div")
divElement.className = "before"
let divElement2 = document.createElement("div")
divElement2.className = "after"
let divElement4 = document.createElement("div")
divElement4.className = "after2"
let divElement3 = document.createElement("div")
divElement3.className = "param"
divElement3.innerText = point2[index].name

在 marker 对象里，追加 dom

let markerObj = marker.domElement.childNodes[0]
marker.domElement.innerHtml = markerObj
marker.domElement.appendChild(divElement)
marker.domElement.appendChild(divElement2)
marker.domElement.appendChild(divElement4)
marker.domElement.appendChild(divElement3)
marker.domElement.className = ""
marker.domElement.className = "dot"
marker.domElement.style.overflow = ""
marker.domElement.firstChild.style.position = "relative"
marker.domElement.firstChild.style.zIndex = "5"

就可以在 css 中，对 dot 类做样式设定了

.dot {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 50;
}

对dom里的元素设置自定动画，页面中用了弹跳的效果

.dot > .before {
  position: absolute;
  width: 120px;
  height: 120px;
  left: -9px;
  top: -33px;
  animation: dotAnime 5s linear infinite;
}
@keyframes dotAnime {
  0% {
    transform: translateY(15px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(15px);
  }
}

*** 只作笔记记录 ***