javascript - Reactjs - 谷歌地图 - 样式信息窗口

Question

我正在尝试更改 InfoWindow 中的样式

这是我使用的代码:

<InfoWindow options={{maxWidth: 900}} position={self.state.position} ref="infoWindow" onCloseclick={self.onLineWindowClose}>
    <div className="berlin" style={{height: '120px',width: '260px', fontFamily: 'Roboto'}}>
        <div style={{height: '20px'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>From: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.startLocation.City}</div>
        </div>
        <div style={{height: '20px', clear: 'both'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>To: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.endLocation.City}</div>
        </div>
        <LineList relationInfo={this.state.relationDetails} />
    </div>
</InfoWindow>

问题很简单。我如何改变它的外观？我尝试设置类名。我还尝试将选项传递给它。但似乎没有任何作用。

Answer 1

对于任何使用 InfoBox 且在样式设置方面遇到问题的人，以下内容对我有用:

JS

<InfoBox key={i}
    defaultPosition={new google.maps.LatLng(marker.lat, marker.lng)}
    options={{
        pane: "overlayLayer",
        pixelOffset: new google.maps.Size(-140, -60),
        alignBottom: true,
        boxStyle: {
            boxShadow: `3px 3px 10px rgba(0,0,0,0.6)`
        },
        closeBoxURL : ""
    }}
>
    <div className="google_map_infobox">
        {marker.txt}
    </div>
</InfoBox>

CSS

.google_map_infobox
{
    background: #fff;
    padding: 1em;
    text-align: center;
    font-size: 1.1rem;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
    border: 1px solid #666;
}

这会创建一个以标记为中心的框，有一个框阴影，没有关闭按钮等。boxStyle选项是我在谷歌搜索中偶然发现的。

我还使用 CSS 对盒子进行了一些样式设置。也许我可以在 boxStyle 属性中完成这一切，但我宁愿将尽可能多的内容保留在 CSS 中。 box-shadow 是唯一不能通过 CSS 工作的东西。

希望这对使用 react-google-maps 的人有所帮助。