React-google-maps + redux - InfoWindow auf Marker klicken

Question

Ich versuche, den gleichen Effekt auf meiner Seite wie hier react-google-map demo zu haben. Ich habe react-google-maps verwendet. Die Sache ist, dass ich Daten mit Markierungen Informationen abhole und ich weiß nicht, wie ich mit Klick umgehen kann, der InfoWindow anzeigen/verbergen wird. Wahrscheinlich ist der Grund irgendwo mit Staat, ich weiß nicht, wie man die Variable "isShown" für jeden Marker im Marker-Array wahr/falsch macht. Hier ist mein Code:

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); 

Derzeit sieht es so aus:

Markers with InfoWindow

In meinem letzten Effekt würde Ich mag Infofenster auf dem neuesten Marker haben und Griff klicken, mit dem Ihnen zum Anzeigen/InfoWindows auf allen Markern ausblenden.

Wie kann ich erreichen, dass InfoWindow auf jedem Marker angezeigt wird?

Vielen Dank für jede Hilfe!

Answer 1

können Sie versuchen, diese

ich bin immer Array Marker in nextProps und so setzen sie in den Zustand

Sie Ihre eigenen Marker Array

import React from 'react' 
import { Link } from 'react-router' 
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps' 

const num10 = 10 
const GettingStartedGoogleMap = withGoogleMap((props) => (
    <GoogleMap 
    ref={props.onMapLoad} 
    defaultZoom={10} 
    center={props.center} 
    onClick={props.onMapClick} 
    > 
    {props.markers.map((marker, index) => (
     <Marker 
     key={index} 
     position={marker.position} 
     onClick={() => props.onMarkerClick(marker)} 
     {...marker} 
     //onRightClick={() => props.onMarkerRightClick(index)} 
     > 
     {marker.showInfo && (
      <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}> 
      <div className=""> 
       myinfowindow 
      </div> 
      </InfoWindow> 
     )} 
     </Marker> 
    ))} 
    </GoogleMap> 
)) 
class GoogleMaps extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     center: { 
     lat: 33.6890603, 
     lng: -78.8866943 
     }, 
     markers: [], 
     true: true 
    } 
    } 
    componentWillReceiveProps(nextProps) { 
    this.setState({ markers: [] },() => { 
     const m = nextProps.pageNo - 1 
     if (nextProps.markers[0] !== undefined) { 
     let obj = {} 
     let newArray = [] 
     for (let i = m * num10; i <= nextProps.markers.length; i++) { 
      if (i === m * num10 + num10) { break } 
      obj = { 
      position: { lat: nextProps.markers[i].loc[1], lng: nextProps.markers[i].loc[0] }, 
      rate: nextProps.markers[i].spaces[0].rate, 
      infoContent: nextProps.markers[i].listingName || nextProps.markers[i].spaces[0].name, 
      showInfo: false, 
      photos: nextProps.markers[i].photos[0], 
      description: nextProps.markers[i].basic_details.notes, 
      secured: nextProps.markers[i].isSecured, 
      markerIcon: false, id: nextProps.markers[i]._id 
      } 
      newArray = this.state.markers 
      newArray.push(obj) 
      this.setState({ markers: newArray, 
      center: { lat: nextProps.markers[0].loc[1], 
         lng: nextProps.markers[0].loc[0] 
      } 
      }) 
     } 
     } else { 
     this.setState({ markers: this.props.markers }) 
     } 
    }) 
    } 
    handleMarkerClick(targetMarker) { 
    this.setState({ 
     markers: this.state.markers.map((marker) => { 
     if (marker === targetMarker) { 
      return { 
      ...marker, 
      showInfo: true, 
      markerIcon: true 
      } 
     } else { 
      return { 
      ...marker, 
      showInfo: false 
      } 
     } 
     }) 
    }) 
    } 
    handleMarkerClose(targetMarker) { 
    this.setState({ 
     markers: this.state.markers.map((marker) => { 
     if (marker === targetMarker) { 
      return { 
      ...marker, 
      showInfo: false 
      } 
     } 
     return marker 
     }) 
    }) 
    } 
    handleMarkerClose2(targetMarker) { 
    this.setState({ 
     markers: this.state.markers.map((marker) => { 
     if (targetMarker) { 
      return { 
      ...marker, 
      showInfo: false 
      } 
     } 
     return marker 
     }) 
    }) 
    } 
    render() { 
    return (<div> 
    <div id="mapcanvas" 
     className="col-md-6" 
     style={{ 'height': '556px', 'width': '674px', paddingLeft: '0px', paddingRight: '0px' }} 
    > 
    <GettingStartedGoogleMap 
    containerElement={<div style={{ height: '100%' }} />} 
    mapElement={<div style={{ height: '100%' }} />} 
    onMapClick={this.handleMarkerClose2.bind(this)} 
    onMarkerClick={this.handleMarkerClick.bind(this)} 
    markers={this.state.markers} 
    center={this.state.center} 
    onMarkerClose={this.handleMarkerClose.bind(this)} 
    /> 
    </div> 
      <style>{'\ 
      .gm-style-iw + div {\ 
       display: none;\ 
       left: 26px;}\ 
       '}</style> 
      </div>)} 
} 
GoogleMaps.propTypes = { 
    markers: React.PropTypes.array 
} 
export default GoogleMaps