所有 div 前面的 Google Map React z-index

问题描述

我正在使用 Google Map React，并且 div 覆盖了所有其他 div。当我将 map-container 设置为 z-index: -1 时，过滤器栏能够显示在地图前面，但随后我失去了与地图交互的能力。

App.js：

<div>
    <FilterBar />
    <div className="flex-row flex-start">
        <Map />
        <PropertyList data={data} />
    </div>
</div>

Map.js：

<div className="map-container">
    <GoogleMapReact
        bootstrapURLKeys={{ key: constants.GOOGLE_API_KEY }}
        defaultCenter={center}
        defaultZoom={zoom}
        resetBoundsOnResize={true}
    >
    </GoogleMapReact>
</div>

过滤器和地图的 CSS：

/* Filter Bar */
.filter-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #fbfbfb;
  height: 48px;
  padding-left: 12px;
  padding-right: 96px;
  padding-top: 8px;
  padding-bottom: 8px;
  z-index: 10;

  -webkit-Box-shadow: 0px 3px 5px 0px rgba(0,0.25);
  -moz-Box-shadow: 0px 3px 5px 0px rgba(0,0.25);
  Box-shadow: 0px 3px 5px 0px rgba(0,0.25);
}

.map-container {
  height: 100vh;
  width: 50%;
  z-index: 1;
}

google-map-react bug

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-map-react reactjs reactjs z-index