腾讯地图点标记v1的temp.mark的上下浮动的动画效果

最新推荐文章于 2024-08-26 08:00:00 发布

阿强的博客

最新推荐文章于 2024-08-26 08:00:00 发布

阅读量682

点赞数 9

文章标签： vue js

本文链接：https://blog.csdn.net/cv1002420186/article/details/135067293

版权

//test.js
// 以下代码为跳动标记，将文档中的原生js转es6的语法
class LabelCluster extends TMap.DOMOverlay {
  constructor(options) {
    super(options)
  }

  onInit(options) {
    this.position = options.position
    this.type = options.type // 当前marker的类型，是跳动或飞入
  }

  // 创建气泡DOM元素
  createDOM() {
    let mydom = document.createElement('img') // 新建一个img的dom
    mydom.src = 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
    mydom.style.cssText = ['position: absolute;', 'top:  0px;', 'left: 0px;'].join('')
    switch (this.type) {
      case 'bounce':
        mydom.setAttribute('class', 'markerBounce') // 给新建的dom添加marker类，添加跳动效果
        break
      case 'flash':
        mydom.setAttribute('class', 'markerFlash') // 给新建的dom添加marker类，添加飞入效果
        break
    }
    return mydom
  }

  // 更新
  updateDOM() {
    if (!this.map) {
      return
    }
    let pixel = this.map.projectToContainer(this.position) // 经纬度坐标转容器像素坐标
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
    let top = pixel.getY() + 'px'
    // 使用top/left将DOM元素定位到指定位置
    this.dom.style.top = top
    this.dom.style.left = left
  }
}
export default LabelCluster

在vue页面引用test.js文件

  import LabelCluster from './test.js'
  ......
//省略部分代码
......
		//调用该动态标记
	 var markerBounce = new LabelCluster({
          map: this.map,
          position: new TMap.LatLng(28.617991865873286, 115.87667802590727),
          type: 'bounce'
        });
	
css的部分
  /* marker跳动的动画 */
  .markerBounce {
    animation: bounce 0.5s infinite ease-in-out alternate;
  }
  /* 跳动的动画 */
  @keyframes bounce {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(0, -50px);
    }
  }