-1
我試圖在我的頁面上產生與react-google-map demo相同的效果。我使用了react-google-maps。問題是我使用標記的信息獲取數據,我不知道如何處理將顯示/隱藏InfoWindow的點擊。可能原因是有狀態的地方,我不知道如何爲標記數組中的每個標記變量「isShown」true/false。這裏是我的代碼:React-google-maps + redux - InfoWindow on marker點擊
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={16}
defaultCenter={props.defCenter}
onClick={props.onMapClick}
>
{props.markers.map((marker,i) => (
<Marker
key={i}
position={marker.location}
time={marker.time}
onClick={() => props.onMarkerClick(marker)}
// HERE I TRIED SOMETHING LIKE marker.isShown=true; but it is NOT WORKING
>
{
<InfoWindow>
<div className="marker-text">{marker.time}</div>
</InfoWindow>
}
</Marker>
))}
</GoogleMap>
));
class GettingStartedExample extends Component {
componentDidMount(){
this.props.fetchMarkers();
}
state = {
markers: this.props.markers,
};
handleMapLoad = this.handleMapLoad.bind(this);
handleMarkerClick = this.handleMarkerClick.bind(this);
handleMapLoad(map) {
this._mapComponent = map;
if (map) {
console.log(map.getZoom());
}
}
handleMarkerClick(targetMarker) {
/*
* All you modify is data, and the view is driven by data.
* This is so called data-driven-development. (And yes, it's now in
* web front end and even with google maps API.)
*/
const nextMarkers = this.state.markers.filter(marker => marker !== targetMarker);
console.log(targetMarker.showInfo)
this.setState({
markers: nextMarkers,
});
}
render() {
return (
<div className='container map-container'>
<GettingStartedGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
onMapLoad={this.handleMapLoad}
markers={this.props.markers}
onMarkerClick={this.handleMarkerClick}
defCenter={{lat: 50.07074, lng: 19.915718}}
/>
</div>
);
}
}
GettingStartedExample.propTypes={
markers: React.PropTypes.array.isRequired,
fetchMarkers: React.PropTypes.func.isRequired
}
function mapStateToProps(state){
return{
markers:state.markers
}
}
export default connect(mapStateToProps,{fetchMarkers})(GettingStartedExample);
目前,它看起來像這樣:
在我的最終效果,我想對最新的標誌信息窗口和處理點擊,使您可以顯示/在所有標記上隱藏InfoWindows。
我該如何實現在每個標記上顯示/隱藏InfoWindow?
非常感謝您的幫助!
你找到解決方案? –