如何在 React 中顯示 StreetViewPanorama？

Question

我想知道這是否可能。 在互聯網上找到一些圖書館，但他們的文檔描述不佳或已過時。 我正在嘗試使用谷歌 API 密鑰讓街景完全正常工作

我在https://react-google-maps-api-docs.netlify.app/嘗試使用@react-google-maps/api庫和文檔 - 不幸的是我真的不知道如何在我的組件中實現它們的表示。 例如他們的代碼：

const { GoogleMap, LoadScript } = require("../../");
const ScriptLoaded = require("../../docs/ScriptLoaded").default;

const mapContainerStyle = {
  height: "400px",
  width: "800px"
};

const center = {
  lat:  51.5320665,
  lng: -0.177203
};

<ScriptLoaded>
  <GoogleMap
    id="circle-example"
    mapContainerStyle={mapContainerStyle}
    zoom={7}
    center={center}
  >
    <StreetViewPanorama
      position={center}
      visible={true}
    />
  </GoogleMap>
</ScriptLoaded>

我設法創造的東西是：

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,
  };
  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}>
        <StreetViewPanorama
          id="street-view"
          mapContainerStyle={containerStyle}
          position={center}
          visible={true}
        />
      </GoogleMap>
    </LoadScript>
  );
}

export default React.memo(Map);

不幸的是，這只會渲染默認地圖，而不是全景圖。

如果有任何其他方式請給我一些提示:)

更新：

我正在使用反應路由，並希望全景圖在其中一條路線上工作。 這是index.js的結構：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { applyMiddleware, combineReducers, createStore } from "redux";
import gamesReducer from "./ducks/games/reducers";
import mapsReducer from "./ducks/maps/reducers";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import logger from "redux-logger";

const store = createStore(
  combineReducers({
    games: gamesReducer,
    maps: mapsReducer,
  }),
  applyMiddleware(thunk, logger)
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

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 (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/maps/*" element={<MapRoutes />}></Route>
      <Route path="/game/*" element={<GameRoutes />}></Route>
      <Route path="*" element={<NotFound />}></Route>
    </Routes>
  );
}

export default App;

MapRoutes.js ：

import React from "react";
import { Routes, Route } from "react-router-dom";
import MapsList from "./MapsList";
import MapDetails from "./MapDetails";
import NewMap from "./NewMap";
import NotFound from "./NotFound";
import Map from "./Map";

export default function MapRoutes() {
  return (
    <div>
      <Routes>
        <Route index element={<MapsList />} />
        <Route path=":id" element={<MapDetails />} />
        <Route path="new" element={<NewMap />} />
        <Route path="test" element={<Map />} />
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </div>
  );
}

Answer 1

我嘗試重現您的代碼，並在index.js而不是Map.js上導入<LoadScript>后以某種方式使其工作。

代碼如下所示：

索引.html

<div id="root"></div>

地圖.js

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

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

  const center = {
    lat: 54.364442,
    lng: 18.643173
  };
  return (
    <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10}>
      <StreetViewPanorama
        id="street-view"
        mapContainerStyle={containerStyle}
        position={center}
        visible={true}
      />
    </GoogleMap>
  );
}

export default Map;

索引.js

import React from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./styles.css";

const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
  render() {
    return (
      <LoadScript googleMapsApiKey={key} libraries={lib}>
        <Map />
      </LoadScript>
    );
  }
}

render(<App />, document.getElementById("root"));

我認為您仍然可以像在示例代碼中一樣在 API 密鑰的key值上使用process.env.REACT_APP_GOOGLE_MAPS_API_KEY 。

樣式.css

h1,
p {
  font-family: Lato;
}

div {
  margin-bottom: 10px;
  margin-top: 10px;
}

這是一個概念證明小提琴供您試用。

希望這可以幫助！