如何在鼠标进入地图容器时显示状态栏？

<template>
  <div @mousemove="updateMousePosition" @mouseenter="showNewBoxFlag = true" @mouseleave="showNewBoxFlag = false">
    <div id="map-container"></div>
    <div v-if="showNewBoxFlag" class="status-bar" :style="{ left: mouseX + 'px', top: mouseY + 'px' }">
      小的状态栏内容
    </div>
  </div>
</template>
<script>
import { Scene, PointLayer, Marker } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

export default {
  data() {
    return {
      showNewBoxFlag: false,
      mouseX: 0,
      mouseY: 0
    };
  },
  mounted() {
    // 组件挂载后初始化地图
    this.initMap();
  },
  methods: {
    updateMousePosition(event) {
      this.mouseX = event.pageX;
      this.mouseY = event.pageY;
    },
    initMap() {
      const mapContainer = document.getElementById('map-container');

      // 创建地图实例
      const scene = new Scene({
        id: mapContainer,
        map: new GaodeMap({
          style: 'dark',
          center: [90.25, 35.39257], // 替换为具体的经度和纬度值
          pitch: 35.210526315789465,
          zoom: 10
        })
      });

      const position1 = [90.25, 35.39257];

      // 创建一个自定义 DOM 元素作为 Marker
      const markerContainer = document.createElement('div');
      markerContainer.style.width = '64px';
      markerContainer.style.height = '64px';
      markerContainer.style.backgroundImage = 'url(/windsvg/风机.svg)';
      markerContainer.className = 'custom-marker';

      // 将自定义 DOM 添加到 Marker 上
      const customMarker = new Marker({
        element: markerContainer,
      })
        .setLnglat(position1);

      // 添加自定义 Marker 到地图
      scene.addMarker(customMarker);

      scene.render();
    },
  }
};
</script>
<style>
.amap-container {
  width: 97% !important;
  height: 97% !important;
  margin-left: 1.7%;
  margin-top: 1.2%;
}

.l7-control-logo {
  display: none;
}

.custom-marker {
  background-size: 100% 100%;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}

.custom-marker:hover {
  transform: scale(1.5) translate(-25%, -50%) !important;
}

.status-bar {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: white;
  border: 1px solid black;
}
</style>
<p>在模板中添加了一个状态栏的 div，并使用 v-if 指令来控制其显示和隐藏。当鼠标进入 mapContainer 范围时，showNewBoxFlag 变为 true，状态栏会显示出来；当鼠标离开 mapContainer 范围时，showNewBoxFlag 变为 false，状态栏会隐藏起来。使用 :style 绑定鼠标的坐标值，使状态栏能够跟随鼠标移动。在样式中添加了 .status-bar 的样式，用于设置状态栏的样式。</p>