Infow窗口onclick不工作

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附加到一個信息窗口的唯一方法是在地方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); 
});