如何使用谷歌地图与Next.js反应

Question

我不确定我做错了什么。我正在尝试在Next.js应用程序中使用谷歌地图react。我几乎逐字逐句地在他们的npm页面上复制了这个例子。这是代码：

import React from "react";
import GoogleMapReact from "google-map-react";
const MapMarker = ({ text }) => <div>{text}</div>;
export default function SimpleMap() {
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627,
},
zoom: 11,
};

return (
<div style={{ height: "100vh", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "MY API KEY IS HERE" }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<MapMarker text="My Marker" />
</GoogleMapReact>
</div>
);
}

我在控制台上不断收到这个错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
at o._getState (index.modern.js?922b:1:2062)
at new o (index.modern.js?922b:1:3935)
at constructClassInstance (react-dom.development.js?ac89:13492:1)
at updateClassComponent (react-dom.development.js?ac89:20423:1)
at beginWork (react-dom.development.js?ac89:22366:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4206:1)
at invokeGuardedCallback (react-dom.development.js?ac89:4270:1)
at beginWork$1 (react-dom.development.js?ac89:27243:1)
at performUnitOfWork (react-dom.development.js?ac89:26392:1)
at workLoopSync (react-dom.development.js?ac89:26303:1)
at renderRootSync (react-dom.development.js?ac89:26271:1)
at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25577:1)
at workLoop (scheduler.development.js?bcd2:266:1)
at flushWork (scheduler.development.js?bcd2:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

知道发生了什么事吗？

提前谢谢。

Answer 1

关闭严格模式。可能在next.config.js中作为reactStrictMode。

Answer 2

从'@react google-maps/api'使用-import{GoogleMap，useJsApiLoader}；相反返回jsx元素时也使用parens