Question

我试图在我的页面上产生与react-google-map demo相同的效果。我使用react-google-maps。问题是我正在使用标记信息获取数据，我不知道如何处理将显示/隐藏InfoWindow的点击。可能原因是某个地方有状态，我不知道如何为markers数组中的每个标记使变量“isShown”为true / false。这是我的代码：

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

目前它看起来像这样：

Markers with InfoWindow

在我最后的效果上，我希望在最新的标记上使用InfoWindow并处理单击，以便在所有标记上显示/隐藏InfoWindows。

如何在每个标记上实现显示/隐藏InfoWindow？

非常感谢您的帮助！

Answer 1

你可以尝试这个

我在nextProps中获取标记数组，因此将其设置为状态

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

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

Answer 2

try this: (props.showInfoIndex == index ) instead of ( props.isOpen )

{props.nhatro.map((nhatro, index) =>
        <Marker
          key={index}
          options={{icon: 'https://i.imgur.com/9G5JOp8.png'}}
          position={nhatro}
          onClick={()=>{ props.showInfo(index)} }
        >
          { (props.showInfoIndex == index ) && 
          <InfoWindow  onCloseClick={props.onToggleOpen}>
            <div>
              <div>nhà trọ cho thuê</div>
              <div >1.500.000đ</div>
            </div>
          </InfoWindow>}
        </Marker>
    )}

use showInfo fnc to setState :

showInfo(a){
 setState({showInfoIndex: a })
}

Answer 3

嘿，您的信息窗口是子组件，如果您想打开信息窗口，只需使信息窗口与标记类等效，然后根据需要设置任何子组件

尝试一下：

<Map
                                    google={this.props.google}
                                    style={style}
                                    initialCenter={{
                                        lat: lat,
                                        lng: lng
                                    }}
                                    zoom={zoom}
                                    onClick={this.onMapClicked}
                                >
                                {marker && marker.map((marker, index) => (
                                    <Marker
                                        key={index}
                                        onClick={this.onMarkerClick}
                                        title={marker.place_id}
                                        name={marker.place_name}
                                        position={{ lat: marker.place_latitude, lng: marker.place_longitude }} >
                                        {
                                            <div></div>
                                        }
                                    </Marker>
                                ))}
                                    <InfoWindow
                                        marker={this.state.activeMarker}
                                        visible={this.state.showingInfoWindow}>
                                        <div>
                                            <h3>{this.state.selectedPlace.name}</h3>
                                        </div>
                                    </InfoWindow>
                                </Map>

React-google-maps + redux - 标记点击时的InfoWindow

3 个答案: