Question

我想在Marker点击上显示InfoWindow。我遵循了一些教程，我在我的项目中使用了react-google-maps。我希望我的应用程序能够像这样工作：＆＃34; https://tomchentw.github.io/react-google-maps/basics/pop-up-window＆＃34;但我的代码有点不同。

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;

我得到了＃34; this.props.markers＆＃34;来自另一个类组件，从URL中获取数据。我几乎可以肯定，这很容易解决。目前在控制台上点击标记我得到了＆＃34;点击了＆＃34;关于Marker close＆＃34; CLOSE＆＃34;你可以从上面的代码猜测它是因为handleMarkerClick（）和handleMarkerClose（）。我希望有InfoWindow的pop窗口。我该怎么做才能让它发挥作用？

这是heroku链接：App on 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;

<强> 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 - 在Marker上显示InfoWindow点击

1 个答案: