React + Redux - 在标记上显示InfoWindow单击

问题描述：

我想在标记上单击显示InfoWindow。我跟着一些教程，并使用react-google-maps作为我的项目。我希望我的应用能够像这样工作：“https://tomchentw.github.io/react-google-maps/basics/pop-up-window”，但我的代码有点不同。React + Redux - 在标记上显示InfoWindow单击

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;

我从另一个从URL获取数据的类组件获得“this.props.markers”。我几乎可以肯定，这是很容易解决的问题。目前在控制台上的标记点击我得到了“点击”，标记关闭“关闭”，你可以从上面的代码猜测这是因为handleMarkerClick（）和handleMarkerClose（）。我想用InfoWindow弹出窗口。我该怎么做才能使它工作？

这里是Heroku的链接：App on heroku

我在这个问题上有点迷失，你可以精心制作一个模型或在https://jsfiddle.net/ – cabolanoz

上的示例你能重新表达吗？信息窗口不显示？ – dagatsoin

我想弹出InfoWindow，就像这里一样，但目前我不知道如何通过反应来实现它。我会将我目前的代码上传到heroku;） – Mateusz

答

您好我在同样的要求来了。我这样做（我使用的终极版和终极版，形实转换）：

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;

个

MarkerReducer.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; 
    } 
};

对不起，我长的帖子，但这是被测试的代码并运行。干杯!

React + Redux - 在标记上显示InfoWindow单击

相关推荐