(React)打开一个模式上的谷歌地图标记点击

更新:添加了Dandy's我现在可以访问这个。setState函数如果我把这个绑定到componentDidMount，但是因为这个。setState在componentDidMount中。setState不是函数

我想我必须在componentDidMount之外建立地图，但我不确定从哪里开始

所以我在React中建立一个谷歌地图，我想在标记点击上打开一个模态。

我在渲染中有模态和

marker.addListener('click', function() {
          infowindow.open(map, marker);
          this.setState({ showModal: true });
        });

在componentDidMount，但我看到我不能改变componentDidMount的状态…任何建议，我如何能得到我的模态显示在标记点击?

import React from 'react';
import {Link} from 'react-router';
import {
    Row,
    Col,
    FormGroup,
    ControlLabel,
    FormControl,
    Button,
    Grid,
    Modal,
    Popover,
    Tooltip,
    OverlayTrigger
} from 'react-bootstrap';
export class Maps extends React.Component {
    constructor(props) {
        super(props);
            userPosition: {lat: 40.7128, lng: -74.0059},
            defaultCenter: {
                lat: 40.7128,
                lng: -74.0059
            },
            showModal: false,
        };
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
        this.componentDidMount = this.componentDidMount.bind(this);
    }
    close() {
        this.setState({ showModal: false });
      }
    open() {
        this.setState({ showModal: true });
      }
  
    componentDidMount() {
        // this.getCurrentPosition();
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">New York</h1>'+
            '<div id="bodyContent">'+
            '<p>content string</p>'+
            '</div>'+
            '</div>';
        let sourland = {lat: 40.473927, lng: -74.694482};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {
                lat: 40.7128,
                lng: -74.0059
            }
        });
        var infowindow = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 200
        });
        var marker = new google.maps.Marker({
          position: sourland,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        // modal code
        marker.addListener('click', function() {
          infowindow.open(map, marker);
          this.setState({ showModal: true });
        });
    }
    render(){
        console.log(this.state);
        const popover = (
          <Popover id="modal-popover" title="popover">
            very popover. such engagement
          </Popover>
        );
        const tooltip = (
          <Tooltip id="modal-tooltip">
            wow.
          </Tooltip>
        );
        return (
            <div>
                <div id="map" className="map-container"></div>
                <Button
                  bsStyle="primary"
                  bsSize="large"
                  onClick={this.open}
                >
                  Launch demo modal
                </Button>
                <Modal show={this.state.showModal} onHide={this.close}>
                  <Modal.Header closeButton>
                    <Modal.Title>Sourland Mountain Preserve Climbs</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>
                    <h4>Sourland Mountain Preserve</h4>
                    <p>Climbing is allowed in blank, but watch out for blank.</p>
                    <h4>This is a Popover</h4>
                    <p>there is a <OverlayTrigger overlay={popover}><a href="#">popover</a></OverlayTrigger> here</p>
                    <h4>Tooltips in a modal</h4>
                    <p>there is a <OverlayTrigger overlay={tooltip}><a href="#">tooltip</a></OverlayTrigger> here</p>
                  </Modal.Body>
                  
                  <Modal.Footer>
                    <Button onClick={this.close}>Close</Button>
                  </Modal.Footer>
                </Modal>
            </div>
        );
    }
}