Google-maps-react 標記未顯示 InfoWindow onClick

Question

當我單擊谷歌地圖標記時，它會注冊單擊，但在 state 更改后，我似乎無法讓 InfoWindow 出現。

單擊時嘗試從更新的 state 設置/讀取

'''反應

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 的 google map 標記，但 infowWindowOpened 返回 undefined

Answer 1

InfoWindow 上的google-maps-react文檔說明如下：

<InfoWindow />組件的可見性由可見屬性控制。 可見的道具是 boolean (PropTypes.bool) ，當為真時顯示<InfoWindow /> ，當為假時隱藏它。

有兩種方法可以控制<InfoWindow />組件的 position。 您可以使用position道具或使用marker道具將<InfoWindow />組件直接連接到現有<Marker />組件。

在您的代碼實現中，您缺少visible道具，以及position道具或marker道具。 這就是為什么您的信息 window 沒有顯示的原因。

我的答案和相關線程React 和 google-maps-react中的鏈接代碼框。 不顯示 InfoWindow希望對您有所幫助。