英文:
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 (
<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>
)
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 来显示。
以下是一个示例:
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%。它将如下所示:
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>
)
希望这有所帮助!如果您需要进一步的解释或者如果我在某些方面误解了您的问题,欢迎留下评论。但这就是我目前能提供的信息。
英文:
MapContainerStyle is a child of your div container
It's because the <GoogleMap />
attribute mapContainerStyle
is also a seperate container and is only a child of the <div>
container outside it, where you put the style
attribute.
So although you set the <div>
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:
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>
)
Notice that the <div>
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 <div>
container, you should just set the height and width of mapContainerStyle
to 100%. It would look like this:
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>
)
So to answer your question, you can just leave your <div>
container without any styling, then setting the mapContainerStyle
to 100% for it's width and height. Or you can set your <div>
container as you have on your sample, depending on your use case. But here's the sample for both.
Without <div>
styling:
return (
<div>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
/>
</div>
)
With <div>
styling:
return (
<div
style={{
height: "100vh",
width: "100%"
}}
>
<GoogleMap
mapContainerStyle={{
margin: "auto",
width: "100%",
height: "100%"
}}
center={center}
zoom={3}
></GoogleMap>
</div>
)
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论