我正在使用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
预先感谢