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 {
    markers: [
      {latlng: [51.5, -0.09], content: 'Marker 1'},
      {latlng: [51.505, -0.08], content: 'Marker 2'},
      {latlng: [51.51, -0.1], content: 'Marker 3'},
    ],
    popupContent: '',
  };
},
mounted() {
  // 创建地图
  const map = L.map('map').setView([51.505, -0.09], 13);

  // 创建MarkerClusterGroup
  const markerClusterGroup = L.markerClusterGroup().addTo(map);

  // 创建Marker
  const markerIcon = L.divIcon({className: 'marker-icon'});
  this.markers.forEach(marker => {
    const markerObj = L.marker(marker.latlng, {icon: markerIcon});
    markerObj.on('mouseover', () => {
      this.popupContent = marker.content;
      markerObj.bindPopup(this.popupContent).openPopup();
    });
    markerObj.on('mouseout', () => {
      markerObj.closePopup();
      this.popupContent = '';
    });
    markerClusterGroup.addLayer(markerObj);
  });
}

在上述代码中，我们定义了一个`markers`数组，用于存储多个Marker标记的坐标和内容。我们创建了一个MarkerClusterGroup，并在其中添加多个Marker标记。在每个Marker标记的`mouseover`事件中，展示Popup，并在`mouseout`事件中隐藏Popup。在展示Popup时，我们通过`setContent`方法设置Popup的内容为当前Marker标记的内容。

通过上述步骤，我们就可以在Vue3上使用Leaflet绑定多个Marker，并实现悬浮显示弹出框，离开不显示的效果。