vue3上leaflet的maker标记悬浮展示内容，离开不显示

在Vue3上使用Leaflet的Marker标记，实现悬浮展示内容，离开不显示，可以通过以下步骤实现：

1. 在Vue3项目中安装leaflet和leaflet.markercluster插件：

npm install leaflet leaflet-markercluster

2. 在Vue3项目中导入leaflet和leaflet.markercluster插件：

import L from 'leaflet';
import 'leaflet-markercluster';

3. 在Vue3组件中定义Marker标记的悬浮展示内容和离开不显示的内容：

data() {
  return {
    popupContent: '',
    marker: null,
  };
},
mounted() {
  // 创建地图
  const map = L.map('map').setView([51.505, -0.09], 13);

  // 创建Marker
  const markerIcon = L.divIcon({className: 'marker-icon'});
  this.marker = L.marker([51.5, -0.09], {icon: markerIcon}).addTo(map);

  // 创建Popup
  const popup = L.popup({
    closeButton: false,
    className: 'custom-popup',
  }).setContent(() => this.popupContent);

  // 鼠标悬停Marker时，展示Popup
  this.marker.on('mouseover', () => {
    this.popupContent = 'Hello World!';
    this.marker.bindPopup(popup).openPopup();
  });

  // 鼠标离开Marker时，隐藏Popup
  this.marker.on('mouseout', () => {
    this.marker.closePopup();
    this.popupContent = '';
  });
}

在上述代码中，我们定义了一个`popupContent`变量，用于存储Marker标记的悬浮展示内容。我们创建了一个Marker，并在`mouseover`事件中展示Popup，并在`mouseout`事件中隐藏Popup。在展示Popup时，我们通过`setContent`方法设置Popup的内容为`popupContent`变量的值。

通过上述步骤，我们就可以在Vue3上使用Leaflet的Marker标记，实现悬浮展示内容，离开不显示的效果。