如何将 google-map-react 与 Next.js 一起使用？答案

【问题标题】：How to use google-map-react with Next.js?如何将 google-map-react 与 Next.js 一起使用？
【发布时间】：2022-07-05 17:53:03
【问题描述】：

我不确定我做错了什么。我正在尝试在我的 Next.js 应用程序中使用 google-map-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)

知道发生了什么吗？

提前谢谢你。

【问题讨论】：

标签： javascript reactjs next.js google-map-react

【解决方案1】：

使用 - 从 '@react-google-maps/api' 导入 { GoogleMap, useJsApiLoader }；反而。同样在返回 jsx 元素时使用括号

【讨论】：