google-map-react 让初始地图覆盖整个屏幕

huangapple go评论58阅读模式
英文:

google-map-react make the initial map cover the whole screen

问题

我正在使用 @react-google-maps/api 在 Next JS 应用中嵌入 Google 地图。

根据他们的文档,他们提到父 HTML 元素可以确定地图的大小。

我组件的返回函数如下:

return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        width: "100%",
      }}
    >
      <GoogleMap
        options={mapOptions}
        zoom={mapOption.zoom}
        center={mapCenter}
        mapTypeId={google.maps.MapTypeId.ROADMAP}
        mapContainerStyle={{ width: "300px", height: "300px" }}
        onLoad={() => console.log("Map Component Loaded...")}
      />
    </div>
)

所以基本上我需要确定地图的宽度和高度,通过父元素来覆盖它,如果我想让它填满整个屏幕。问题是上面的返回仍然显示一个 300x300 像素的地图。有没有人有解决方案,使初始地图填满整个屏幕?

英文:

I am using @react-google-maps/api to use google map inside Next JS app.

Based on their documents, they mentioned that the parent HTML element could determine the size of the map.

My return function from my component looks like this:

return (
    &lt;div
      style={{
        display: &quot;flex&quot;,
        flexDirection: &quot;column&quot;,
        height: &quot;100vh&quot;,
        width: &quot;100%&quot;,
      }}
    &gt;
      &lt;GoogleMap
        options={mapOptions}
        zoom={mapOption.zoom}
        center={mapCenter}
        mapTypeId={google.maps.MapTypeId.ROADMAP}
        mapContainerStyle={{width: &quot;300px&quot;,height: &quot;300px&quot;}}
        onLoad={() =&gt; console.log(&quot;Map Component Loaded...&quot;)}
      /&gt;
    &lt;/div&gt;
  )

So basically I need to determine the width and height of the map and via parent, it would be overridden if I want to make it fill the entire screen. The problem is that the above return still shows the map with 300 to 300 px.
Does anyone have any solution so that the initial map fills the entire screen?

答案1

得分: 0

以下是翻译好的内容:

MapContainerStyle 是您的 div 容器的子元素

这是因为 <GoogleMap /> 属性 mapContainerStyle 也是一个独立的容器,它只是位于外部的 <div> 容器的子元素,您在外部设置了 style 属性。

所以,即使您将 <div> 容器的宽度和高度设置为 100% 或 100vh/vw,如果它的子组件具有较低的宽度和高度,尤其是因为您在这里使用的是像素,当然它将以宽度和高度仅为 300px 来显示。

以下是一个示例:

google-map-react 让初始地图覆盖整个屏幕

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

请注意,具有绿色背景和高度/宽度为 500px 的 <div> 容器显示了我在此处提供的 mapContainerStyle,我将宽度和高度设置为 50%。

因此,如果您想填充 500px 正方形的 <div> 容器,您只需将 mapContainerStyle 的高度和宽度设置为 100%。它将如下所示:

google-map-react 让初始地图覆盖整个屏幕

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> 样式:

google-map-react 让初始地图覆盖整个屏幕

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

带有 <div> 样式:

google-map-react 让初始地图覆盖整个屏幕

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

希望这有所帮助!如果您需要进一步的解释或者如果我在某些方面误解了您的问题,欢迎留下评论。但这就是我目前能提供的信息。

英文:

MapContainerStyle is a child of your div container

It's because the &lt;GoogleMap /&gt; attribute mapContainerStyle is also a seperate container and is only a child of the &lt;div&gt; container outside it, where you put the style attribute.

So although you set the &lt;div&gt; container with 100% width and height or 100vh/vw, if it's child component got a lower width and height, most especially because what you're using here is pixels, ofcourse it would show as only 300px in width and also in height.

Here's an example:

google-map-react 让初始地图覆盖整个屏幕

return (
    &lt;div
      style={{
        backgroundColor: &quot;green&quot;,
        display: &quot;flex&quot;,
        flexDirection: &quot;column&quot;,
        height: &quot;500px&quot;,
        width: &quot;500px&quot;
      }}
    &gt;
      &lt;GoogleMap
        mapContainerStyle={{
          margin: &quot;auto&quot;,
          width: &quot;50%&quot;,
          height: &quot;50%&quot;
        }}
        center={center}
        zoom={3}
      &gt;&lt;/GoogleMap&gt;
    &lt;/div&gt;
)

Notice that the &lt;div&gt; container having a green background and height/width of 500px, shows that it contains the mapContainerStyle provided here that I set the width and height to 50%.

So if you want to fill the 500px square &lt;div&gt; container, you should just set the height and width of mapContainerStyle to 100%. It would look like this:

google-map-react 让初始地图覆盖整个屏幕

return (
    &lt;div
      style={{
        backgroundColor: &quot;green&quot;,
        display: &quot;flex&quot;,
        flexDirection: &quot;column&quot;,
        height: &quot;500px&quot;,
        width: &quot;500px&quot;
      }}
    &gt;
      &lt;GoogleMap
        mapContainerStyle={{
          margin: &quot;auto&quot;,
          width: &quot;100%&quot;,
          height: &quot;100%&quot;
        }}
        center={center}
        zoom={3}
      &gt;&lt;/GoogleMap&gt;
    &lt;/div&gt;
)

So to answer your question, you can just leave your &lt;div&gt; container without any styling, then setting the mapContainerStyle to 100% for it's width and height. Or you can set your &lt;div&gt; container as you have on your sample, depending on your use case. But here's the sample for both.

Without &lt;div&gt; styling:

google-map-react 让初始地图覆盖整个屏幕

return (
    &lt;div&gt;
      &lt;GoogleMap
        mapContainerStyle={{
          margin: &quot;auto&quot;,
          width: &quot;100%&quot;,
          height: &quot;100%&quot;
        }}
        center={center}
        zoom={3}
      /&gt;
    &lt;/div&gt;
)

With &lt;div&gt; styling:

google-map-react 让初始地图覆盖整个屏幕

return (
    &lt;div
      style={{
        height: &quot;100vh&quot;,
        width: &quot;100%&quot;
      }}
    &gt;
      &lt;GoogleMap
        mapContainerStyle={{
          margin: &quot;auto&quot;,
          width: &quot;100%&quot;,
          height: &quot;100%&quot;
        }}
        center={center}
        zoom={3}
      &gt;&lt;/GoogleMap&gt;
    &lt;/div&gt;
)

Hope this helps! Feel free to leave a comment if you need clarification or if I misunderstood your question somehow. But that's about it from me for now.

huangapple
  • 本文由 发表于 2023年2月6日 19:38:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/75360826.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定