GoogleMaps React:默认情况下打开InfoWindow-并非来自onClick

时间:2019-02-06 14:31:23

标签: javascript reactjs google-maps google-maps-react

默认情况下,我想在我的react项目的google maps组件中的标记上方打开一个信息窗口。

我试图通过为标记组件提供一个ref来实现此目的,该处理组件将调用标记onclick方法的处理程序,该方法会触发信息窗口切换。

但是,尽管我调用setState,但是我发现状态没有更新。我尝试在componentDidMount中执行此操作,还尝试直接在标记安装处理程序中设置状态。

如果手动单击标记,则状态成功突变。

我看到了this解决方案,但是就在React中使用它而言,这有点不雅,而我感到沮丧的是,我没有看到我的逻辑有任何问题。它应该可以工作,我想知道为什么不可以。

任何帮助将不胜感激-我的代码如下:

import { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const style = {
    height:'400px',
    width: '100%'
}

class MapView extends Component {

    constructor() {
        super();
        this.state = {
        showingInfoWindow: true, 
        activeMarker: {},         
        selectedPlace: {}         
      };
    }

    onMarkerClick = (props, marker, e) => {
        this.setState(prevState => ({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true
      }));
    }

    onMarkerMounted = element => this.onMarkerClick(element.props, element.marker, element);

    onClose = () => {
      if (this.state.showingInfoWindow) {
        this.setState({
          showingInfoWindow: false,
          activeMarker: null
        });
      }
    };

    render() {
        return(
            <Map
              google={this.props.google}
              style={style}
              initialCenter={{
                lat: {redacted},
                lng: {redacted}
              }}
              zoom={15}
              onClick={this.onMapClicked}
            >
                <Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick}/>
                <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            Your Location Here!
          </div>
        </InfoWindow>

            </Map>
        );
    }
} 

export default GoogleApiWrapper({
  apiKey: ('MY_API_KEY')
})(MapView);

1 个答案:

答案 0 :(得分:0)

我相信您的榜样一切都很好。似乎没有显示信息窗口的原因是因为一旦触发onMarkerMounted函数,地图还没有完全加载。

这是加载地图后显示信息窗口的更改列表:

a)引入mapLoaded状态来跟踪地图是否已加载:

this.state = {
  //...  
  mapLoaded: false
};

,并在加载地图后将其设置为true

handleMapIdle = () => {
    this.setState({
      mapLoaded: true
    });
}


<Map
    google={this.props.google}
    style={style}
    initialCenter={this.props.center}
    zoom={this.props.zoom}
    onIdle={this.handleMapIdle}
  >
  ...
</Map>

,并在加载地图后最终初始化标记:

{this.state.mapLoaded && (
   <Marker ref={this.onMarkerMounted} onClick={this.onMarkerClick} />
)} 

Here is a demo