如何解决@react-google-maps/api进入全屏时自定义按钮消失的问题

你遇到的问题和z-index无关，核心原因是谷歌地图触发全屏时，仅会将地图自身的容器节点推入全屏渲染栈，你当前放在地图容器外部、或挂载在全局body下的自定义按钮不属于全屏元素的子节点，自然不会在全屏模式下渲染。

• 方案1（推荐）：将自定义按钮挂载到谷歌地图内置的控件容器中
  @react-google-maps/api 支持直接将自定义元素插入谷歌地图自带的控件插槽，这些插槽默认属于全屏元素的子节点，全屏时会自动正常显示。
  示例实现代码：

import { createRoot } from 'react-dom/client'
import { Map } from '@react-google-maps/api'

const LoadMap = () => {
  const handleMapLoad = (map) => {
    // 创建自定义按钮的容器
    const controlContainer = document.createElement('div')
    controlContainer.style.margin = '10px'
    
    // 渲染你的自定义按钮到容器
    const root = createRoot(controlContainer)
    root.render(<button>你的自定义按钮</button>)
    
    // 将容器插入地图右上角的控件插槽，可根据需求替换为其他位置
    map.controls[window.google.maps.ControlPosition.TOP_RIGHT].push(controlContainer)
  }

  return (
    <Map
      onLoad={handleMapLoad}
      // 保留你的其他地图配置
      zoom={10}
      center={{ lat: -34.397, lng: 150.644 }}
    />
  )
}

• 方案2：监听全屏切换事件手动移动按钮节点
  如果你需要保留原有的按钮挂载逻辑，可监听全局全屏切换事件，全屏激活时将按钮节点移动到当前全屏元素下，退出时移回原父节点即可。
  示例实现代码：

import { useEffect, useRef } from 'react'

const YourComponent = () => {
  const btnRef = useRef(null)
  const originalParentRef = useRef(null)

  useEffect(() => {
    if (btnRef.current) {
      originalParentRef.current = btnRef.current.parentElement
    }

    const handleFullscreenChange = () => {
      const activeFullscreenEl = document.fullscreenElement
      if (!btnRef.current || !originalParentRef.current) return

      if (activeFullscreenEl) {
        // 全屏激活时移动按钮到全屏元素下
        activeFullscreenEl.appendChild(btnRef.current)
      } else {
        // 退出全屏时移回原位置
        originalParentRef.current.appendChild(btnRef.current)
      }
    }

    document.addEventListener('fullscreenchange', handleFullscreenChange)
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
  }, [])

  return <button ref={btnRef}>你的自定义按钮</button>
}

全屏模式下的定位上下文是当前激活的全屏元素，而非浏览器窗口，放在全屏元素外的fixed定位元素无论z-index设多高都不会显示，这就是你之前调整样式无效的原因。

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