0

当我单击谷歌地图标记时，它会注册单击，但我似乎无法让 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 返回 undefined

4

1 回答 1

0

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

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

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

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

我的答案和相关线程React 和 google-maps-react中的链接代码框。不显示 InfoWindow希望对您有所帮助。

于 2019-10-24T07:53:49.127 回答