如何在React中显示StreetViewPanorama ?

Question

我想知道这是否可能。在网上找到了一些图书馆，但是他们的文档描述很差或者过时了。我试图有完全工作的街景使用谷歌API密钥

我试图使用@react-google-maps/api库与文档在https://react-google-maps-api-docs.netlify.app/-不幸的是，我真的不知道如何实现他们的表示在我的组件。例如他们的代码:

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);

不幸的是，这只呈现默认的地图，而不是全景。

如果有其他的方法，请给我一些提示:)

更新:

我正在使用react路由，并希望全景在其中一条路由中工作。这是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上导入<LoadScript>后工作而不是Map.js.

代码如下:

index . html

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

Maps.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;

index.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"));

我认为你仍然可以使用process.env.REACT_APP_GOOGLE_MAPS_API_KEY上的key值的API键，就像你的示例代码。

styles

css

h1,
p {
font-family: Lato;
}
div {
margin-bottom: 10px;
margin-top: 10px;
}

这里有一个概念验证小提琴供您尝试。

希望这对你有帮助!