Question

infowWindow onclick事件和infowWindow选项不起作用？这是我正在尝试的代码：

import React from 'react'
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'

const mapOptions = {
  scrollwheel: false,
  draggable: true,
  rotateControl: false,
  scaleControl: false,
  streetViewControl: false,
  panControl: false
}
const num10 = 10
const descriptionLentgh = 35
const GettingStartedGoogleMap = withGoogleMap((props) => (
  <GoogleMap
    options={mapOptions}
    ref={props.onMapLoad}
    defaultZoom={4}
    center={props.center}
    onClick={props.onMapClick}
  >
    {props.markers.map((marker, index) => (
      <Marker
        key={index}
        position={marker.position}
        onClick={() => props.onMarkerClick(marker)}
        icon={marker.markerIcon === true
          ? '/images/markerlogo2.png' : '/images/markerlogo.png'}
        label={{ text: `$${marker.rate}`, color: 'white' }}
        {...marker}
        //onRightClick={() => props.onMarkerRightClick(index)}
      >
        {marker.showInfo && (
          <InfoWindow onClick={props.onWindowClick}
            onCloseClick={() => props.onMarkerClose(marker)}
          >
             <div className="">
           <div className="map-info-box">
             <div className="parking-inner-container">
                <div className="parking-inner">
                <div className="parking-container">
                  <div className="parking-image-wrapper">
                      <div className="parking-image"
                        style={{ 'backgroundImage': `url(${marker.photos})` }}
                      />
                  </div>
                </div>
              </div>
             </div>
          <div className="parking-info">
              <div className="parking-title">
                <h5><b>${marker.rate} {marker.infoContent}</b></h5>
              </div>
              <div className="parking-location">
                <h2>{`${marker.description.substring(0, descriptionLentgh)}...`}</h2>
              </div>
              <div className="">
                <h2 className="label label-default" style={marker.secured === false
                  ? { backgroundColor: 'gray', fontSize: '100%' }
                  : { backgroundColor: 'green', fontSize: '100%' } }
                >
                {marker.secured === false ? 'open' : 'secured'}</h2>
              </div>
          </div>
           </div>
         </div>
          </InfoWindow>
        )}
        </Marker>
    ))}
  </GoogleMap>
))
class GoogleMaps extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      center: {
        lat: 47.853287,
        lng: -93.646775
      },
      markers: [],
      true: true
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ markers: [], center: nextProps.bound.location }, () => {
      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
          }
          newArray = this.state.markers
          newArray.push(obj)
          this.setState({ markers: newArray })
        }
      } 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
      })
    })
  }
  onWindowClick() {
    console.log('fdgdsfg')
  }
  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%' }} />}
    //onMapLoad={_.noop}
    onMapClick={this.handleMarkerClose2.bind(this)}
    onMarkerClick={this.handleMarkerClick.bind(this)}
    markers={this.state.markers}
    center={this.state.center}
    //onMarkerRightClick={this.handleMarkerRightClick.bind(this)}
    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 1

我几天前遇到过这个问题，似乎将onClick附加到InfoWindow的唯一方法就是google.maps.event。

我使用'react-dom / server'来设置它的内容，其中content是一个React.Component。

这里有一个例子：

const info = new googleMaps.InfoWindow({
    map,
    disableAutoPan: true,
    maxWidth: 300,
    content: ReactDom.renderToString(content)
});

google.maps.event.addListener(info, 'domready', () => {
    document.querySelector('.gm-style-iw').addEventListener('click', onClick);
});

Infow窗口onclick无效

1 个答案: