在百度地图.js里加上声音报警和图标闪烁功能

在百度地图上增加点异常闪烁的功能,并且声音报警
这里会用到定时器,记得用完定时器一定要及时关掉

声音报警使用到audio标签

    <!-- 报警点声音 -->
    <audio
      ref="videoMp3"
      controls
      style="position: absolute; left: -1000000px; top: -1000000px; z-index: -1"
    >
      <source src="../../../../assets/didi.mp3" type="audio/mpeg" />
    </audio>

然后在方法里,渲染完点之后就开始写闪烁和报警的逻辑

  // 闪烁加报警
    alrmDiDiVoice() {
      let that = this;
      this.videoTimer.forEach((item) => {
        clearInterval(item);
      });
      this.videoTimer = [];
      that.marks.forEach((e, index) => {
        $("#id" + e.pointId + "_" + e.dataId).text(e.value);
        if (e.flag) {
          // 闪烁
          let markPointTimer = setInterval(() => {
            $("#mark" + e.pointId).fadeToggle();
          }, 250);
          this.videoTimer.push(
            setInterval(() => {
              clearInterval(markPointTimer);
              $("#mark" + e.pointId).fadeIn();
              $("#mark" + e.pointId).show();
            }, 2600)
          );
        }
        let flag = that.marks.some((val) => val.flag); 
        if (flag) {
        // 声音报警
          this.$refs.videoMp3.play();
        }
      });
    },