我的自定义按钮在@react-google-maps/api 中全屏消失答案

【问题标题】：My custom buttom disapear on fullscreen in @react-google-maps/api我的自定义按钮在@react-google-maps/api 中全屏消失
【发布时间】：2021-10-03 10:29:30
【问题描述】：

我创建了一个自定义按钮，允许我在地图上做一些事情。我按下全屏按钮，它就消失了。

我尝试使用控制台并使用 z-index 和其他东西来推动它。

https://codesandbox.io/s/romantic-chihiro-ns1vv?file=/src/LoadMap.jsx

这是我在代码和框中的代码，用于该错误。

请按“在新窗口中打开”以获得全屏按钮。

谢谢！

【问题讨论】：

标签： javascript reactjs google-maps

【解决方案1】：

带有 MapControl 组件。

    <MapControl position={google.maps.ControlPosition.BOTTOM_CENTER}>
  <div>That was easy</div>
</MapControl>

https://gist.github.com/jgimbel/6a36d60e28aaf453d0093ddc47f36533

【讨论】：

【解决方案2】：

全屏模式在它内部创建元素。您应该在创建按钮后添加按钮，在 React 中您可以使用 ReactDOM.createPortal 来完成。在这里你应该添加你的 btn：document.getElementById('your-map-id').getElementsByTagName('div')[0]

【讨论】：