Google-maps-react 标记未显示 InfoWindow onClick答案

【问题标题】：Google-maps-react marker not showing InfoWindow onClickGoogle-maps-react 标记未显示 InfoWindow onClick
【发布时间】：2020-02-17 17:21:43
【问题描述】：

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

尝试在点击时从更新状态设置/读取

'''反应

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)

'''

我希望出现带有某种 InfowWindow 的谷歌地图标记，但 infowWindowOpened 返回 undefined

【问题讨论】：

标签： javascript reactjs google-maps ecmascript-6 google-maps-react

【解决方案1】：

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

<InfoWindow /> 组件的可见性由可见的道具。可见道具是一个布尔值(PropTypes.bool) 为真时显示<InfoWindow />，为假时隐藏它。

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

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

我的回答并在相关线程React and google-maps-react. Not displaying InfoWindow 中链接codesandbox 希望对您有所帮助。

【讨论】：