React Google Map组件页面刷新后无法切换2D/3D视图求助

页面刷新后StreetViewPanorama无法正常显示的核心原因是：GoogleMap与StreetViewPanorama是两个独立的顶层视图容器，嵌套使用会导致初始化时的视图优先级冲突——2D地图会默认覆盖街景视图，即使设置visible: true也无法触发API的视图切换逻辑。

解决方案一：条件渲染独立组件 #

根据isEnabled状态直接切换渲染GoogleMap或StreetViewPanorama，避免嵌套冲突，初始化时即可正确加载对应视图。

修改后的子组件代码：

import { useMemo } from "react";
import {
  GoogleMap,
  MarkerF,
  StreetViewPanorama,
  useLoadScript,
} from "@react-google-maps/api";
import "./pointofinterest.css";

const PointOfInterest = (props) => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "xxxxxxxxxxxxx",
  });

  const center = useMemo(() => ({ lat: 7.4192661, lng: 3.8761708 }), []);

  if (!isLoaded) {
    return <h1>Loading...</h1>;
  }

  return (
    <div className="App">
      {props.isEnabled ? (
        <StreetViewPanorama
          containerClassName="map-container"
          options={{ position: center, visible: true }}
        />
      ) : (
        <GoogleMap
          mapContainerClassName="map-container"
          center={center}
          zoom={17}
        >
          <MarkerF position={center} />
        </GoogleMap>
      )}
    </div>
  );
};

export default PointOfInterest;

解决方案二：通过Map实例控制街景（保留交互灵活性） #

如果需要在同一个容器中切换视图，可通过GoogleMap的实例API直接控制街景显示，避免组件嵌套问题。

修改后的子组件代码：

import { useMemo, useRef, useEffect } from "react";
import {
  GoogleMap,
  MarkerF,
  useLoadScript,
} from "@react-google-maps/api";
import "./pointofinterest.css";

const PointOfInterest = (props) => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "xxxxxxxxxxxxx",
  });
  const mapRef = useRef(null);

  const center = useMemo(() => ({ lat: 7.4192661, lng: 3.8761708 }), []);

  useEffect(() => {
    if (!mapRef.current) return;
    
    const streetView = mapRef.current.getStreetView();
    if (props.isEnabled) {
      streetView.setPosition(center);
      streetView.setVisible(true);
    } else {
      streetView.setVisible(false);
    }
  }, [props.isEnabled, center]);

  if (!isLoaded) {
    return <h1>Loading...</h1>;
  }

  return (
    <div className="App">
      <GoogleMap
        ref={mapRef}
        mapContainerClassName="map-container"
        center={center}
        zoom={17}
      >
        <MarkerF position={center} />
      </GoogleMap>
    </div>
  );
};

export default PointOfInterest;

额外注意事项 #

• 确保Google Maps API密钥未限制Street View服务权限（默认包含，若有密钥配置需检查）
• 地图容器的CSS需设置明确的宽高（如.map-container { width: 100%; height: 400px; }），否则组件可能无法正常渲染

内容的提问来源于stack exchange，提问作者Emmanuel Olumide Fabelurin