React-google-maps+redux-infowindow在标记点击上

Question

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

Answer 1

你可以试试这个

我在nextprops中获取markers数组，因此将其设置为

您可以使用自己的标记数组

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