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

來源

2017-04-19 Mateusz

我在這個問題上有點迷失，你可以精心製作一個模型或在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; 
    } 
};

對不起，我長的帖子，但這是被測試的代碼並運行。乾杯!

來源

2017-08-08 11:54:50

React + Redux - 在標記上顯示InfoWindow單擊

回答

相關問題