Question

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

这是我的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

预先感谢

通过单击列表项或标记来

0 个答案: