【高德地图】点闪烁功能封装

在地图应用中，我们希望在用户进行条件检索后，点击定位的点能够以闪烁的方式吸引用户注意，以便用户快速定位目标。本文将结合 Vue2 和高德地图，介绍如何封装一个通用的点闪烁功能 markerBlinkMixin，实现对指定地图标记点的闪烁效果。

---

项目环境及版本

技术栈：Vue2（2.6.12）、ES6、高德地图（1.4.15）

运行环境：Node（v14.17.6）、Npm（6.14.15）

一、代码实现

1. 创建 markerBlinkMixin.js 文件

• 闪烁时长：闪烁持续多长时间后自动停止。
• 闪烁频率：点显示和隐藏的切换间隔。
• 防止叠加：多次调用闪烁时，避免定时器叠加导致异常。
• 资源释放：组件销毁时清理定时器，避免内存泄漏。

/** 地图点闪烁 */
export const markerBlinkMixin = {
  data() {
    return {
      blinkTimer: null,
      blinkDuration: 2 * 1000, // 闪烁总时长
      blinkInterval: 500, // 闪烁间隔
    };
  },
  methods: {
    /** 点闪烁效果 */
    markerStartBlink(marker) {
      if (!marker) return;

      let visible = true;
      const startTime = Date.now();

      // 清除之前的定时器，避免叠加
      if (this.blinkTimer) {
        clearInterval(this.blinkTimer);
      }

      this.blinkTimer = setInterval(() => {
        const elapsed = Date.now() - startTime;
        if (elapsed >= this.blinkDuration) {
          // 结束闪烁，确保显示
          marker.show();
          clearInterval(this.blinkTimer);
          this.blinkTimer = null;
          return;
        }

        if (visible) {
          marker.hide();
        } else {
          marker.show();
        }
        visible = !visible;
      }, this.blinkInterval);
    },
  },
  beforeDestroy() {
    if (this.blinkTimer) clearTimeout(this.blinkTimer);
  },
};

2. 混入的使用

在组件中引入并注册

import { markerBlinkMixin } from "@mixins/markerBlinkMixin";

export default {
  mixins: [markerBlinkMixin],
};

监听子组件的定位事件

/** 顶部检索结果点击定位 */
    handleFlyTo (position, id) {
      const vm = this;
      vm.currentPositionId = id;
      this.map.on("moveend", this.handleMoveEnd());
      this.map.setCenter(position);
   },

因为标记点的数量较多，所以只在地图上渲染屏幕可视范围内的点。定位时开启地图的 moveend事件，定位结束后重新渲染该四方角内的点。遍历接口返回的结果，匹配到 currentPositionId的点后，调用点闪烁方法。

/** 点渲染 **/
renderMarkers () {
    //...业务逻辑
    let findMarker = this.markerList.find((m) => {
        const extData = m.getExtData();
        return extData && extData.ids.includes(id);
    });
    if (!findMarker) {
        this.markerList.push(marker);
        this.map.add(marker);
    }
    if (id === this.currentPositionId) {
        this.onMarkerBlinking(findMarker || marker);
    }
}


/** 点闪烁逻辑处理 */
onMarkerBlinking (marker) {
  this.markerStartBlink(marker);
  this.currentPositionId = "";
  this.map.off("moveend", this.handleMoveEnd);
},

二、实现效果

两种类型的点闪烁，普通点标记&点聚合：

总结

主要通过 setInterval 每隔 blinkInterval 切换点的显示和隐藏状态，通过计算时间差判断是否达到闪烁总时长，达到后停止闪烁并确保点显示。通过 marker.show() 和 marker.hide() 控制点的显示隐藏。 以上就是高德地图点闪烁的功能封装啦！^-^