如何在React中显示StreetViewPanorama？现有实现遇问题求助

问题分析 #

你当前的代码将<StreetViewPanorama>嵌套在<GoogleMap>组件内部，这是导致只显示普通地图而非街景的核心原因。<StreetViewPanorama>不需要依赖<GoogleMap>容器，它可以独立渲染，或者通过配置<GoogleMap>的属性来切换显示街景。

解决方案1：独立渲染StreetViewPanorama #

直接将<StreetViewPanorama>作为<LoadScript>的子组件，无需包裹在<GoogleMap>中：

import React from "react";
import { LoadScript, StreetViewPanorama } from "@react-google-maps/api";

function Map() {
  const containerStyle = {
    height: "400px",
    width: "800px",
  };

  const position = {
    lat: 54.364442,
    lng: 18.643173,
  };

  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
      <StreetViewPanorama
        id="street-view"
        containerStyle={containerStyle}
        position={position}
        visible={true}
      />
    </LoadScript>
  );
}

export default React.memo(Map);

解决方案2：在GoogleMap中启用街景 #

如果你需要同时保留地图和街景切换的能力，可以通过<GoogleMap>的streetView属性配置：

import React from "react";
import { GoogleMap, LoadScript, StreetViewPanorama } from "@react-google-maps/api";

function Map() {
  const containerStyle = {
    height: "400px",
    width: "800px",
  };

  const center = {
    lat: 54.364442,
    lng: 18.643173,
  };

  // 创建街景实例并绑定到地图
  const streetViewPanorama = new window.google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    {
      position: center,
      visible: true,
    }
  );

  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
        streetView={streetViewPanorama} // 绑定街景到地图
      />
    </LoadScript>
  );
}

export default React.memo(Map);

适配React路由的优化建议 #

为避免路由切换时重复加载Google Maps脚本，建议将<LoadScript>提升到App组件的外层，包裹整个路由结构：

修改App.js：

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import MapRoutes from "./pages/MapRoutes";
import GameRoutes from "./pages/GameRoutes";
import { LoadScript } from "@react-google-maps/api";

function App() {
  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/maps/*" element={<MapRoutes />}></Route>
        <Route path="/game/*" element={<GameRoutes />}></Route>
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </LoadScript>
  );
}

export default App;

之后在Map组件中移除<LoadScript>，直接渲染街景或地图组件即可。

内容的提问来源于stack exchange，提问作者Jakub Falkiewicz