Chrome浏览器中点击React-Leaflet地图自动放大问题求助

问题原因 #

你的MapContainer没有设置明确的高度，导致Leaflet地图渲染时出现异常交互行为，表现为单击地图就自动放大。Leaflet要求地图容器必须有确定的高度才能正常工作，否则会引发布局和交互逻辑紊乱。

解决方案 #

给MapContainer添加高度样式，让它占满父容器的高度：

修改MapContainer的className，增加h-full类（适配父容器的60vh高度）：

<MapContainer
  className="m-10 h-full"
  center={[51.505, -0.09]}
  zoom={13}
  scrollWheelZoom={true}
>
  {/* 原有子组件内容 */}
</MapContainer>

补充说明 #

• 你之前怀疑的overflow属性并非问题根源，但保证地图容器布局稳定是Leaflet正常工作的基础。
• Leaflet默认缩放行为为双击放大，修复容器高度后，地图会恢复正常交互逻辑。

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