React Redux-在标记单击上显示InfowDindow

Question

我想在标记单击上显示infowdist。我遵循了一些教程，并在项目中使用了React-Google-Maps。我希望我的应用程序可以这样工作：" https：//tomchentw.github.io/react-google-maps/basics/basics/pop-up-window"，但是我的代码有些不同。

class Map extends React.Component {
  handleMarkerClick(){
    console.log("Clicked");
  }
  handleMarkerClose(){
    console.log("CLOSE");
  }
    render(){
      const mapContainer= <div style={{height:'100%',width:'100%'}}></div>
      //fetch markers
      const markers = this.props.markers.map((marker,i) => {
        return (
            <Marker key={i} position={marker.location} showTime={false} time={marker.time} onClick={this.handleMarkerClick} >
            {
              <InfoWindow onCloseClick={this.handleMarkerClose}>
                 <div>{marker.time}</div>
              </InfoWindow>
            }
            </Marker>
          )
      })
      /* set center equals to last marker's position */
      var centerPos;
      if(markers[markers.length-1]!== undefined)
      {
        centerPos=markers[markers.length-1].props.position;
      }
      else {
        centerPos={};
      }


        return (
          <GoogleMapLoader
          containerElement={mapContainer}
          googleMapElement={
            <GoogleMap
              defaultZoom={17}
              center={centerPos}
            >
              {markers}
            </GoogleMap>
          }/>
        );
    }
}
export default Map;

我从另一个类组件中获得了" this.props.markers"，从URL获取数据。我几乎可以肯定，解决问题很容易。当前，在标记中，单击控制台，我从上面的代码中猜到了"单击"，在标记关闭"关闭"上，这是因为HandlemarkerClick((和HandlemarkerClose((。我想和Infowdown一起提供流行窗口。 我该怎么做才能使它起作用？

这是Heroku链接：Heroku上的应用

Answer 1

嗨，我遇到了相同的要求。我这样做(我正在使用redux和redux-thunk(：

googlemap.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    withGoogleMap,
    GoogleMap,
    Marker,
    InfoWindow
} from 'react-google-maps';
import { onMarkerClose } from '../actions/Cabs';

const GettingStartedGoogleMap = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={12}
        defaultCenter={{ lat: 12.9716, lng: 77.5946 }}
    >
        {props.markers.map( (marker, index) => (
            <Marker {...marker} onClick={() => props.onMarkerClose(marker.key)}>
                {marker.showInfo &&(
                    <InfoWindow onCloseClick={() => props.onMarkerClose(marker.key)}>
                        <div>
                            <h1>Popover Window</h1>
                        </div>
                    </InfoWindow>
                )}
            </Marker>
        ))}
    </GoogleMap>
));
class CabType extends Component{
    constructor(props){
        super(props);
    }
    render(){
        if(this.props.cabs.length === 0){
            return <div>loading...</div>
        }
        return(
            <div className="map-wrapper">
                <GettingStartedGoogleMap
                    containerElement={
                        <div style={{ height: '100%' }} />
                    }
                    mapElement={
                        <div style={{ height: '100%' }} />
                    }
                    onMarkerClose = {this.props.onMarkerClose}
                    markers={this.props.showMap ? this.props.markers : []}
                />
            </div>
        )
    }
}
export default connect(store => {return {
    cabs : store.cabs,
    markers: store.markers
}}, {
    onMarkerClose
})(CabType);

action.js

const getMarkers = (cabs , name) => dispatch => {
    let markers = [];
    let data = {};
    cabs.map(cab => {
        if(cab.showMap){
            data = {
                position: {
                    lat : cab.currentPosition.latitude,
                    lng : cab.currentPosition.longitude
                },
                showInfo: false,
                key: cab.cabName,
                icon: "/images/car-top.png",
                driver: cab.driver,
                contact: cab.driverContact,
            };
            markers.push(data);
        }
    });
      dispatch(emitMarker(markers));
    };
function emitSetMarker(payload){
    return{
        type: SET_MARKER,
        payload
    }
}
export const onMarkerClose = (key) => dispatch => {
    dispatch(emitSetMarker(key))
};

rootreducer.js

import { combineReducers } from 'redux';
import { cabs } from "./Cabs";
import { markers } from "./Markers";
const rootReducer = combineReducers({
    cabs,
    markers,
});
export default rootReducer;

MarkerDucer.js

import { GET_MARKERS, SET_MARKER } from "../types"
export const markers = (state = [], action) => {
    switch (action.type){
        case GET_MARKERS:
            return action.payload;
        case SET_MARKER:
            let newMarker = state.map(m => {
                if(m.key === action.payload){
                    m.showInfo = !m.showInfo;
                }
                return m;
            });
            return newMarker;
        default: return state;
    }
};

对不起，很长一段文章，但这是经过测试和运行的代码。欢呼！