Question

我正在使用react-google-maps，并且我想要完成与Airbnb类似的操作，当您将鼠标悬停在搜索结果上，然后在地图上突出显示“标记”（又名OverlayView）。但是我要解决的问题是，如果某个OverlayView在另一个OverlayView的下面，我想将该“活动的” OverlayView置于顶部（例如通过调整z-index）。 Airbnb上的地图就是这样做的，那就是当您将鼠标悬停在搜索结果上并检查标记时，z-index被更改为9001，以确保其位于所有其他标记的前面。

几年前，与此相关的一些问题没有得到任何进展：

tomchentw/react-google-maps#199 tomchentw/react-google-maps#93

在问题199中，提到可以用this.refs.childDiv.parentNode进行修改并在其上设置z-index，但是在React v16中，this.refs不再是我所知道的（已弃用）。原始评论者在jsfiddle的代码示例中附加了以下内容：

class OverlayViewExample extends React.Component {
  render () {
    const pos = {lat: -34.397, lng: 150.644};
    const mapPane = OverlayView.OVERLAY_MOUSE_TARGET;
    const getOffset = this.getPixelPositionOffset.bind(this);

    return (
      <GoogleMap
        defaultZoom={8}
        defaultCenter={pos}
      >
        <OverlayView
          position={pos}
          mapPaneName={mapPane}
          getPixelPositionOffset={getOffset}
        >
          <div style={{zIndex: 2}} className="overlay" ref="childDiv">This should be in front</div>
        </OverlayView>

        <OverlayView
          position={pos}
          mapPaneName={mapPane}
          getPixelPositionOffset={getOffset}
        >
          <div style={{zIndex: 1}} className="overlay">Another overlay should be in front of me</div>
        </OverlayView>
      </GoogleMap>
    );
  }

  getPixelPositionOffset (width, height) {
    // this.refs is an empty object when I tried this :(
    if (this.refs.childDiv) {
        this.refs.childDiv.parentNode.style.zIndex = 2;
    }
    return { x: -(width / 2), y: -(height / 2) };
  }
}

当我尝试这种解决方法时，this.refs是一个空对象，因此无法更改该节点的基础zIndex。

还有另一种方法可以确保两个OverlayView彼此靠近时，可以将背景中的一个放置到前景吗？

Answer 1

这个问题的答案实际上是我的问题（我应该已经测试了Github的示例代码）...

在这一行：<div style={{zIndex: 2}} className="overlay" ref="childDiv">This should be in front</div> zIndex实际上在做我想要的事情（它将在前景中显示我想要的任何元素）。

因此，在每个OverlayView中，只需将z-index应用于第一个子元素，这将影响每个OverlayView的顺序。

在react-google-maps

1 个答案: