MapContainerStyle是div容器的子级

这是因为<GoogleMap />属性mapContainerStyle也是一个单独的容器，并且只是<div>容器外部的一个子容器，您将style属性放在该容器中。
因此，尽管你设置了<div>容器100%的宽度和高度，或者100 vh/vw，如果它的子组件得到了一个较低的宽度和高度，特别是因为你在这里使用的是像素，当然它会显示为只有300 px的宽度和高度。

下面是一个例子：

return (
    <div
      style={{
        backgroundColor: "green",
        display: "flex",
        flexDirection: "column",
        height: "500px",
        width: "500px"
      }}
    >
      <GoogleMap
        mapContainerStyle={{
          margin: "auto",
          width: "50%",
          height: "50%"
        }}
        center={center}
        zoom={3}
      ></GoogleMap>
    </div>
)

请注意，<div>容器具有绿色背景和500 px的高度/宽度，显示它包含这里提供的mapContainerStyle，我将宽度和高度设置为50%。
所以如果你想填充500 px的<div>容器，你只需要将mapContainerStyle的高度和宽度设置为100%。

return (
    <div
      style={{
        backgroundColor: "green",
        display: "flex",
        flexDirection: "column",
        height: "500px",
        width: "500px"
      }}
    >
      <GoogleMap
        mapContainerStyle={{
          margin: "auto",
          width: "100%",
          height: "100%"
        }}
        center={center}
        zoom={3}
      ></GoogleMap>
    </div>
)

为了回答你的问题，你可以让你的<div>容器不做任何样式，然后把mapContainerStyle的宽度和高度设置为100%，或者你可以根据你的用例，把你的<div>容器设置为你的示例，但是这里有两个示例。

不带<div>样式：

return (
    <div>
      <GoogleMap
        mapContainerStyle={{
          margin: "auto",
          width: "100%",
          height: "100%"
        }}
        center={center}
        zoom={3}
      />
    </div>
)

使用<div>样式：

return (
    <div
      style={{
        height: "100vh",
        width: "100%"
      }}
    >
      <GoogleMap
        mapContainerStyle={{
          margin: "auto",
          width: "100%",
          height: "100%"
        }}
        center={center}
        zoom={3}
      ></GoogleMap>
    </div>
)

希望这对你有帮助！如果你需要澄清或者我误解了你的问题，请随时留下评论。但现在我只能说这么多了。