谷歌地图反应标记未显示信息窗口点击

Question

当我单击谷歌地图标记时，它会记录单击，但我无法在状态更改后显示信息窗口。

尝试在单击时从更新状态进行设置/读取

'''反应

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react'; 
export class BathroomMap extends React.Component{
constructor(props){
super(props);
this.state = {
gmapsAPI: "https://maps.googleapis.com/maps/api/js?key="+ this.API_KEY +"&callback=initMap",
center: {
lat: 40.7367,
lng: -73.9899
},
zoom: 15,
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
infoWindowOpen: false,
}
this.handleToggleOpen = this.handleToggleOpen.bind(this);
}
handleToggleOpen = () => {
console.log("Marker Clicked");
this.setState({
infoWindowOpen: !this.state.infoWindowOpen,
});
}
render() {
return (
<Map google={window.google} zoom={14} initialCenter={this.state.center}>
<Marker onClick={this.handleToggleOpen}
name={'Current location'} />
<InfoWindow open={this.state.infoWindowOpen} onClose={this.onInfoWindowClose}>
<div>
<h1>Marker Info Placeholder</h1>
</div>
</InfoWindow>
</Map>
);
}
}
BathroomMap = GoogleApiWrapper({
apiKey: (/*Omitted*/)
})(BathroomMap)

'''

我希望谷歌地图标记会出现某种信息窗口，但相反，infowWindowOpen返回未定义

Answer 1

InfoWindow 上的 google-maps-react 文档如下：

<InfoWindow />组件的可见性由 可见道具。可见道具是一个布尔(PropTypes.bool)当 true 时显示<InfoWindow />，在 false 时隐藏它。

有两种方法可以控制<InfoWindow />的位置 元件。您可以使用position道具或连接<InfoWindow />组件<Marker />通过使用marker道具。

在代码实现中，缺少visible道具，以及position道具或marker道具。这就是您的信息窗口未显示的原因。

我的答案和链接的代码沙箱在相关线程 React 和 google-maps-react。不显示信息窗口有望对您有所帮助。