我的谷歌地图没有采用我的页脚CSS

Question

我正在努力确保我在Footer中放置的任何CSS都不会受到添加Google Maps API的影响。你可以从这个例子中看到，我无法保持背景的黑色。

页脚

import React, {Component} from 'react';
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';
import './App.css';
class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map 
google={this.props.google} 
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: ('YOUR_API_KEY')
})(Footer);

页脚CSS

.site-footer {
left: 0;
bottom: 0;
width: 100%;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background: black;
}

页脚示例

Answer 1

使用google-maps-react库时，似乎有不同的div包含映射。根据包的文档，有一个style，您可以配置它来设置映射维度，还有一个containerStyle，它是一个包含映射的div。

因此，要将地图背景设置为黑色，需要使用containerStyle。

class Footer extends Component {
render(){
const style = {
width: '300px',
height: '300px'
}
const containerStyle = {
position: 'absolute',  
width: '100%',
height: '100%',
backgroundColor: 'black'
}
return (
<div className="site-footer">
<footer>
<p>My Footer</p>
<Map 
google={this.props.google} 
zoom={10}
initialCenter={{
lat: 35.5496939,
lng: -120.7060049
}}
style={style}
containerStyle={containerStyle}
/>
</footer>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY"
})(Footer);

您还需要定义site-footer类的宽度和高度来填充空白。我在这里使用了800px，这样它将真正完全包含我的映射及其容器。

.site-footer {
left: 0;
bottom: 0;
width: 800px;
height: 800px;
margin-top: 20px;
color: white;
text-align: center;
flex-shrink: 0;
background-color: black;
}

请参阅示例代码。

请在示例代码中使用您的API密钥使其工作。