Javascript Reactjs-谷歌地图-风格信息窗口

我正在尝试更改中信息窗口的样式

这是我使用的代码：

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

---

问题很简单。我如何改变它的外观？我试着设置类名。我还尝试将选项传递给它。但似乎什么都不管用。

我建议您为谷歌地图创建自己的组件，并使用纯javascript创建自定义信息窗口。通过这种方式，您可以直接使用所有google maps本机属性等，而无需使用任何超级复杂和有限的组件库：

快速反应的google地图包装示例示例：

从“React”导入React，{Component，PropTypes}； 类GoogleMap扩展组件{ 组件安装{ this.map=new google.maps.Mapthis.refs.map{ 滚轮：对， 缩放：13， 真的， mapTypeControl:false， 街景控制：错误， ZoomControl选项：{ 位置：google.maps.ControlPosition.TOP_左上角， 样式：google.maps.ZoomControlStyle.LARGE， }, 中心：新google.maps.LatLng60.1698556999999，24.938379， }; this.props.onGetMapthis.map； } 渲染{ 常量映射样式={ 高度：“100%”， 宽度：“100%”， }; 回来 ; } } GoogleMap.propTypes={ onGetMap:PropTypes.func.isRequired， };

---

导出默认谷歌地图 我建议您为谷歌地图创建自己的组件，并使用纯javascript创建自定义信息窗口。通过这种方式，您可以直接使用所有google maps本机属性等，而无需使用任何超级复杂和有限的组件库：

快速反应的google地图包装示例示例：

从“React”导入React，{Component，PropTypes}； 类GoogleMap扩展组件{ 组件安装{ this.map=new google.maps.Mapthis.refs.map{ 滚轮：对， 缩放：13， 真的， mapTypeControl:false， 街景控制：错误， ZoomControl选项：{ 位置：google.maps.ControlPosition.TOP_左上角， 样式：google.maps.ZoomControlStyle.LARGE， }, 中心：新google.maps.LatLng60.1698556999999，24.938379， }; this.props.onGetMapthis.map； } 渲染{ 常量映射样式={ 高度：“100%”， 宽度：“100%”， }; 回来 ; } } GoogleMap.propTypes={ onGetMap:PropTypes.func.isRequired， };

---

导出默认谷歌地图 对于任何使用InfoBox并且在样式设置上有困难的人，以下内容对我很有用：

JS

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

我还使用CSS对长方体进行了一些样式设计。也许我可以在boxStyle属性中完成这一切，但我宁愿尽可能多地将其保留在CSS中。盒子阴影是唯一一个不能通过CSS工作的东西

---

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

对于使用InfoBox但在样式设置上有困难的人，以下几点对我很有用：

JS

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

我还使用CSS对长方体进行了一些样式设计。也许我可以在boxStyle属性中完成这一切，但我宁愿尽可能多地将其保留在CSS中。盒子阴影是唯一一个不能通过CSS工作的东西

---

希望这对使用谷歌地图的人有所帮助。

Wow。这就是答案。谢谢sir谢谢，请注意这些只是供您开始使用的，不是功能齐全的复制/粘贴组件。。但我想你会想到：哇。这就是答案。谢谢sir谢谢，请注意这些只是供您开始使用的，不是功能齐全的复制/粘贴组件。。但我想你会明白的：

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

.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;
}