Question

当我单击google maps标记时，它注册了单击，但是在状态更改后无法显示InfoWindow。

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

'''反应

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返回未定义

Answer 1

InfoWindow上的google-maps-react文档说：

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

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

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

我的回答以及相关主题codesandbox中的链接React and google-maps-react. Not displaying InfoWindow有望为您提供帮助。

Google Maps反应标记未显示InfoWindow onClick

1 个答案: