Vue.js 实现鼠标悬停图片右侧显示状态栏

<template>
  <div @mousemove="updateMousePosition">
    <div id="map-container"></div>
    <div v-if="showNewBoxFlag" class="status-bar" :style="{ top: mouseY + 'px', left: mouseX + '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: #fff;
  border: 1px solid #000;
}
</style>
<p>要实现当鼠标进入图片范围时在鼠标的右侧出现一个小的状态栏，可以按照以下步骤进行实现：</p>
<ol>
<li>在数据中添加一个名为'showNewBoxFlag'的变量，初始值为'false'，用于控制小状态栏的显示与隐藏。</li>
<li>在'updateMousePosition'方法中，根据鼠标的位置更新'mouseX'和'mouseY'的值。</li>
<li>在'custom-marker'的DOM元素中添加一个'mouseenter'事件监听器，将'showNewBoxFlag'设置为'true'，表示鼠标进入了图片的范围。</li>
<li>在'custom-marker'的DOM元素中添加一个'mouseleave'事件监听器，将'showNewBoxFlag'设置为'false'，表示鼠标离开了图片的范围。</li>
<li>在模板中添加一个小状态栏的DOM元素，使用'v-if'指令根据'showNewBoxFlag'的值来控制显示与隐藏。</li>
<li>根据'mouseX'和'mouseY'的值设置小状态栏的位置，可以使用'style'属性来设置'top'和'left'的值。</li>
</ol>
<p>修改后的代码如下：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div @mousemove=&quot;updateMousePosition&quot;&gt;
    &lt;div id=&quot;map-container&quot;&gt;&lt;/div&gt;
    &lt;div v-if=&quot;showNewBoxFlag&quot; class=&quot;status-bar&quot; :style=&quot;{ top: mouseY + 'px', left: mouseX + 'px' }&quot;&gt;
      &lt;!-- 小状态栏内容 --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
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();
    },
  }
};
&lt;/script&gt;

&lt;style&gt;
.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: #fff;
  border: 1px solid #000;
}
&lt;/style&gt;
</code></pre>
<p>在上述代码中，根据鼠标进入和离开图片范围时的事件，通过'showNewBoxFlag'来控制小状态栏的显示与隐藏，并使用'top'和'left'属性来设置小状态栏的位置。根据具体需求，你可以修改小状态栏的样式和内容。</p>