使地图的“活动部分”或“视图”小于传单中地图的实际高度？

Question

我正在react-leaflet中制作一个导航应用程序。我希望设计的样式能够使搜索栏位于地图顶部，如下所示：

因为我没有声誉，所以无法发布图片，抱歉...

https://github.com/lyoungblood14/myrepo1/blob/main/annotation.png

但是，从情况可以看出，这当然会导致传单控件覆盖搜索栏。它有：一个父级

.page-div

，以及三个兄弟姐妹

.search-div

、

.map-div

和

.info-div

[当前不可见]。父母

.page-div

有

position: relative

，孩子有

position: absolute

。

这也许可以通过我https://groups.google.com/g/leaflet-js/c/rKMZX3PKFuI解决，但我更多地致力于样式设计并且不太了解jsx。这个解决方案似乎也是不可能的，因为我担心从长远来看它会导致问题，即无法在页面上正确居中弹出传单。

有没有办法让地图的“活动部分”或“视图”小于地图的实际高度？例如：

https://github.com/lyoungblood14/myrepo1/blob/main/iPhone%208%20Plus%20-%201.png

这在理想情况下意味着例如居中功能，或显示我们的路线，应用程序将在操作区域而不是整个地图上居中。

编辑：我希望探索这个......

https://github.com/Leaflet/Leaflet/issues/859

Answer 1

我通过这种方式解决了部分问题： 使用 leaflet-active-area 插件，我遵循@benistary的建议here并添加：

return (<div id="map-div">
        <MapContainer
          center={initialCenter}
          zoom={13}
          style={{ height: "100%", width: "100%" }}
          zoomControl={false}
          minZoom={8}
        >
          <MapContent></MapContent>
          
          ...OTHER STUFF...
        
        </MapContainer>
      </div>
      )
      
      
      
const MapContent = () => {
  const map = useMap();

  useEffect(() => {
    // Use setActiveArea in useEffect to ensure it runs after the map is initialized
    map?.setActiveArea("activeArea", true, true);
  }, [map]);
}

/*style active area*/

.activeArea {
  width: 100%;
  top: 19%;
  position: absolute;
  /* position: sticky; */
  right: 0%;
  min-height: 80%;
  border: 10px blue solid;
  z-index: 5000;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

关键是地图应该在MapContainer中，并且需要MapContent来设置活动区域。重要的是，

const

代码在返回之后出现，因此地图首先被初始化。

但是，这并不影响传单栏元素的放置...