javascript - google-maps-react 通过单击列表项或标记打开 InfoWindow

Question

我正在使用谷歌地图反应组件来显示一个带有标记的简单地图......以及一个过滤结果的菜单......当我点击一个标记时，我能够显示信息窗口......但是当我点击在菜单列表上我似乎无法弄清楚如何打开相应标记的信息窗口？如何获得对特定标记的引用？

这是我的APP

state = {
currentPlace: '',
currentMarker: {},
markerShowing: false,
};

onMarkerClick = (props, marker) => {
this.setState({
  currentPlace: props,
  currentMarker: marker,
  markerShowing: true,
});
}

render() {

const { currentMarker, currentPlace, clubs, markerShowing } = this.state;

return (
  <div>
    <main>
      <Menu
        clubs={clubs}
      />

      <GoogleMap
        clubs={clubs}
        markerInfo={this.onMarkerClick}
        currentMarker={currentMarker}
        currentPlace={currentPlace}
        markerShowing={markerShowing}
        />
    </main>
  </div>
);
}
}

这是 GoogleMap 组件

const GoogleMap = (props) => {

const { google, clubs, currentMarker, currentPlace, 
markerShowing } = props;

const newClubList = clubs
  .filter(club => club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) >= 0)
  .map(club => {
    return (
      <Marker
        key={club.name}
        title={club.title}
        name={club.name}
        position={club.position}
        onClick={props.markerInfo.bind(this)}
      />
    )
  });

return (
  <Map
    google={google}
    initialCenter={{
      lat: 34.098051,
      lng: -118.327246
    }}
    zoom={15}
    style={{height: '100%', width: '100%'}}

    {newClubList}

  </Map>
   );
  }

这是我的菜单组件

当我单击 Li 时...我基本上想从我的应用程序中调用 onMarkerClick 函数...传递道具（我拥有）和标记（我不知道如何获得！）

  const Menu = (props) => {

  const { clubs } = props;

   const newClubList = clubs
  .filter(club => club.name.toLowerCase().indexOf(filterTerm.toLowerCase()) >= 0)
  .map(club => {
    return (
      <li key={club.name} className='item' onClick={}>{club.name}</li>
    )
  });

return (
  <nav id='menu' className={toggleMenu}>
      <ul>
        {newClubList}
      </ul>
  </nav>
);
}

这是完整的回购... https://github.com/ctaminian/neighborhood_map

提前致谢

标签： javascriptreactjs