react-leaflet中GeoJson图层悬停不显示Popup 仅点击弹出的问题咨询

你的实现存在两个核心逻辑偏差，直接导致了悬停无法弹出Popup的现象：

1. Popup绑定时机错误：你将bindPopup的执行逻辑放到了mouseover的回调函数中，意味着第一次鼠标移入图层时，才会完成Popup和图层的关联绑定，这个过程本身不会触发Popup打开。
2. 缺少主动控制弹窗的逻辑：Leaflet内置的Popup默认触发规则为「点击已绑定Popup的图层打开弹窗」，没有主动调用打开方法的情况下，即便完成绑定也不会自动展示，最终就会出现只有点击图层才会弹出内容的问题。

调整onEachFeature的回调逻辑，按照以下规则实现即可满足悬停弹出的需求：

• 在onEachFeature的初始化阶段，为每个矢量图层提前完成Popup绑定，不要把绑定逻辑放到hover事件回调中，避免重复绑定造成的性能损耗
• 监听mouseover事件，触发时主动调用图层的openPopup方法，可传入鼠标当前坐标，让Popup展示在光标位置
• 监听mouseout事件，触发时调用closePopup方法关闭Popup，避免内容残留在地图上
• 调整Popup的默认配置项，适配悬停场景的交互逻辑，避免意外关闭弹窗

const onEachCountry = (feature, layer) => {
  const areaName = feature.properties.NAME_1;   
  // 初始化阶段直接完成Popup绑定
  layer.bindPopup(areaName, {
    closeButton: false, // 悬停弹窗不需要展示关闭按钮
    autoClose: false, // 禁止弹窗自动关闭
    closeOnClick: false // 禁止点击图层时意外关闭悬停弹窗
  });

  // 鼠标移入时主动打开Popup，定位到鼠标位置
  layer.on('mouseover', (e) => {
    layer.openPopup(e.latlng);
  });

  // 鼠标移出时关闭Popup
  layer.on('mouseout', () => {
    layer.closePopup();
  });
}

• 如果需要实现Popup完全跟随鼠标移动的效果，可额外绑定mousemove事件，在回调中重复调用openPopup更新Popup的展示位置，提升交互顺滑度
• 可搭配style属性调整图层的鼠标悬停样式（比如提高填充透明度、调整描边颜色），进一步强化交互反馈

内容的提问来源于stack exchange，提问作者Nguyen Tu