React Leaflet中添加Div到地图图层不显示问题求助

问题出在你直接把<div>Test</div>放在MapContainer内部——Leaflet的MapContainer会生成专属DOM结构，内部仅支持Leaflet官方组件（比如TileLayer、Marker），普通div不会被渲染到地图图层上，自然会跑到地图下方。

按以下步骤修改：

1. 调整DOM结构：把文本div作为MapContainer的同级元素，共同放在一个父容器里
2. 给父容器设置position: relative，让子元素的绝对定位基于这个父容器
3. 给文本div设置绝对定位、位置、z-index（要高于Leaflet地图默认的z-index，一般设500即可）
4. 修正代码里的opacity拼写错误：把'O,33'改成0.33（大写O改成数字0，逗号改点号）

修改后的代码示例：

<div style={{ position: 'relative' }}>
  <MapContainer 
    center={center} 
    zoom={zoom} 
    style={{ height: "90vh", opacity: 0.33 }}
  >
    <TileLayer 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
    />
    <Markers marker={mark} />
  </MapContainer>
  {/* 文本div放在MapContainer外面，作为同级 */}
  <div style={{
    position: 'absolute',
    top: '20px',
    left: '20px',
    zIndex: 500,
    background: 'white',
    padding: '8px 12px',
    borderRadius: '4px',
    boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
  }}>Test</div>
</div>

解释：

• 父容器的position: relative是绝对定位的基准，确保文本div不会跑到页面其他位置
• zIndex: 500确保div在地图图层上方（Leaflet地图容器默认z-index是400）
• 额外加的背景、内边距等样式是为了让文本在地图上更显眼，可根据需求调整

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