infowindow.close（）在使用reactjs的Google地图上不起作用

Question

我正在尝试在React.js中关闭我的Google Maps项目中的infowindow，但是现在可以正常工作了。 infowindow.open（）似乎可以正常工作。 我正在尝试关闭过滤器函数中的infowindow，但是我一直在获取infowindow.close（）不是函数。

如何将componentsDidMount函数中的信息窗口调用到我的过滤器函数中？

这是我的代码

export default class MapContainer extends Component {
// ======================
// ADD LOCATIONS TO STATE
// ======================
constructor(props) {
super(props)
this.state = {
    places: [],
    filtered: [],
    search: ''

}
}
 componentDidMount() {

if (this.props && this.props.google) { // checks to make sure that props have 
  been passed
    const {
        google,
        infowindow
    } = this.props; // sets props equal to google
    const maps = google.maps; // sets maps to google maps props

    const mapRef = this.refs.map; // looks for HTML div ref 'map'. Returned in render below.
    const node = ReactDOM.findDOMNode(mapRef); // finds the 'map' div in the React DOM, names it node

    const mapConfig = Object.assign({}, {
        center: {
            lat: 51.0486,
            lng: -114.0708
        }, // sets center of google map to NYC.
        zoom: 11, // sets zoom. Lower numbers are zoomed further out.
        mapTypeId: 'roadmap' // optional main map layer. Terrain, satellite, hybrid or roadmap--if unspecified, defaults to roadmap.
    })

    this.map = new maps.Map(node, mapConfig); // creates a new Google map on the specified node (ref='map') with the specified configuration set above.

    // ==================
    // ADD MARKERS TO MAP
    // ==================

    zomatoAPI()
        .then(p => {
                this.setState({
                    places: p,
                    filtered: p
                })
                const {
                    google,
                    infowindow
                } = this.props;
                p.forEach(location => { // iterate through locations saved in state
                    location.marker = new google.maps.Marker({ // creates a new Google maps Marker object.
                        position: {
                            lat: Number(location.location.latitude),
                            lng: Number(location.location.longitude)
                        }, // sets position of marker to specified location
                        map: this.map, // sets markers to appear on the map we 
  just created on line 35
                        title: location.name // the title of the marker is set 
    to the name of the location
                    });

                    location.marker.addListener('click', function () {

                        const content =
                            `<div class="place">
                          <img height= 70px width=70px src=${this.photo} 
      alt="${this.title}">

                            <h3>${this.title}</h3>
                            <p>Cuisine: ${this.cuisines}</p>
                            <p>Rating: ${this.rateText}, ${this.rating}</p>
                            <p>Price: ${this.price}</p>

                            `


                        const infowindow = new google.maps.InfoWindow()

                        infowindow.setContent(content)


                        infowindow.open(this.map, this)

                    })
                })

            }

        )
}

     }
    filter = (e) => {
    const {
    google, infowindow
} = this.props
const {
    places,
    filtered
} = this.state;
const search = e.target.value;


this.setState({
    search: search
})
infowindow.close()   //==================>>>>>> ****issue***

Answer 1

您要在调用open之前声明一个新的const信息窗口，一旦到达要调用.close（）的行，该信息窗口就不再有效。 而且我不知道infowindow.close（）是否在您的MapContainer类内部，但是您可以在顶部声明一个var infowindow，然后您的const infowindow = new google.maps.InfoWindow（）所在的行就变成了infowindow = new google .maps.InfoWindow（）