Javascript 点击map div外的列表项时，如何在google maps中的标记上打开信息窗口？

我正在使用google maps react library为我的项目显示企业的位置，单击标记我可以打开信息窗口，但在map div外单击该标记的列表项我无法打开信息窗口，因为我从上个星期就一直在做这件事，所以在谷歌地图的文档中找不到有用的东西。 我的代码是

为了地图和名单

import React, { Component } from 'react'
import { Map, GoogleApiWrapper, Marker, InfoWindow } from 'google-maps-react';
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
import axios from 'axios'

import Header from '../components/header'
import Footer from '../components/footer'
import Features from '../components/features'
import Sponsors from '../components/sponsors'
import BannerAd from '../components/bannerAd'
import Spinner from '../components/spinner'
import { url } from '../../config'

import { BsChevronRight } from 'react-icons/bs'

class Places extends Component {
    constructor(props) {
        super(props)

        this.state = {
            address: '',
            categoryId: 0,

            categories: [],
            places: [],

            loading: false,

            center: { lat: null, lng: null },
            myLocation: { lat: 39.2820678, lng: -76.5916704 },

            activeMarker: {},
            showingInfoWindow: false,
            selectedPlace: {},
            range: 3,
        }
    }

    componentDidMount() {
        this.getCategories();
        let address = ''
        if (this.props.match.params.address !== 'undefined') {
            address = this.props.match.params.address
        }
        this.setState({
            address: address,
            categoryId: this.props.match.params.category,
            center: { lat: this.props.match.params.lat, lng: this.props.match.params.lng }
        }, () => { this.getPlaces(); })

    }

    getCategories = async () => {
        await this.setState({ loading: true })
        axios.get(url + 'types').then((response) => {
            this.setState({ categories: response.data, loading: false })
        }).catch((error) => {
            console.log(error)
        })
    }

    getPlaces = async () => {
        await this.setState({ loading: true })

        axios.get(url + `places?lat=${this.state.center.lat}&lng=${this.state.center.lng}&typeId=${this.state.categoryId}&range=${this.state.range}`)
            .then(async (response) => {
                await this.setState({ places: response.data, loading: false })
            })
            .catch((err) => {
                console.log(err)
            })
    }

    handleChange = address => {
        this.setState({ address });
    };

    handleSelect = async value => {
        const address = await geocodeByAddress(value);
        const center = await getLatLng(address[0]);
        await this.setState({ center, address: value });
        await this.getPlaces();
    };

    onChange = async (event) => {
        await this.setState({ [event.target.name]: event.target.value });
        await this.getPlaces()
    }


    onSelectPlace = async (place) => {
        const center = { lat: place.location.lat, lng: place.location.lng }
        const address = place.name;
        await this.setState({ center, address, selectedPlace: place, });
    }

    onMarkerClick = (props, marker, e) => {
        this.setState({
            selectedPlace: props.place,
            activeMarker: marker,
            showingInfoWindow: true
        });
    }

    centerMoved = (mapProps, map) => {
        let lat = map.center.lat();
        let lang = map.center.lng();
        this.setState({ center: { lat: lat, lng: lang }, address: '' });
        this.getPlaces();
    }

    onMapClicked = () => {
        if (this.state.showingInfoWindow) {
            this.setState({
                showingInfoWindow: false,
                activeMarker: null
            });
        }
    }

    handleZoomChanged = (mapProps, map) => {
        let lat = map.center.lat();
        let lang = map.center.lng();

        {
            map.zoom === 18 ? this.setState({ range: 1, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                : map.zoom === 17 ? this.setState({ range: 1, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                    : map.zoom === 16 ? this.setState({ range: 1, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                        : map.zoom === 15 ? this.setState({ range: 1.7, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                            : map.zoom === 14 ? this.setState({ range: 2.697331, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                : map.zoom === 13 ? this.setState({ range: 8, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                    : map.zoom === 12 ? this.setState({ range: 15, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                        : map.zoom === 11 ? this.setState({ range: 22, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                            : map.zoom === 10 ? this.setState({ range: 60, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                                : map.zoom === 9 ? this.setState({ range: 100, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                                    : map.zoom === 8 ? this.setState({ range: 300, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                                        : map.zoom === 7 ? this.setState({ range: 750, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
                                                            : map.zoom === 6 ? this.setState({ range: 1000, center: { lat: lat, lng: lang } }) : this.setState({ range: 8, center: { lat: lat, lng: lang } }, () => { this.getPlaces() })
        }

    };

    render() {
        const myLocation = this.state.myLocation;
        const center = this.state.center;
        return (
            <div>
                <Header />
                <div className='py-5 bg-danger'>
                    <div className='row'>
                        <div className='col-12'>
                            <div className='col-10 offset-1'>
                                <div className='card'>
                                    <div className='card-body'>
                                        <form className='form-row align-items-center justify-content-center'>
                                            <div className='col-auto'>
                                                <label className='h5'>Show me</label>
                                            </div>
                                            <div className='col-auto'>
                                                <select id='categoryId' name='categoryId' className='custom-select ml-2' value={this.state.categoryId} onChange={this.onChange}>
                                                    <option value='0'>All</option>
                                                    {
                                                        this.state.categories && this.state.categories.map(category => {
                                                            return (
                                                                <option value={category.Id} key={category.Id}>{category.Name}</option>
                                                            )
                                                        })
                                                    }
                                                </select>
                                            </div>
                                            <div className='col-auto'>
                                                <label className='ml-4 h5'>Near</label>
                                            </div>
                                            <PlacesAutocomplete value={this.state.address} onChange={this.handleChange} onSelect={this.handleSelect}>
                                                {
                                                    ({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                                                        <div className='search-input-container col-6'>
                                                            <input {...getInputProps({ placeholder: '210 S. Rolling Road, Catonsville, MD 21228', className: 'form-control ml-2' })} value={this.state.address} />
                                                            <div className='autocomplete-container'>
                                                                {
                                                                    suggestions.map(suggestion => {
                                                                        const className = suggestion.active ? 'suggestion-item suggestion-item--active' : 'suggestion-item';
                                                                        return (
                                                                            <div {...getSuggestionItemProps(suggestion, { className })}>
                                                                                <span>{suggestion.description}</span>
                                                                            </div>
                                                                        );
                                                                    })
                                                                }
                                                            </div>
                                                        </div>
                                                    )
                                                }
                                            </PlacesAutocomplete>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className='container-fluid vh-100 bg-white'>
                    <div className='row h-75'>
                        <div className='col-4 h-100 p-0 overflow-auto'>
                            <div className='card card-border shadow-lg'>
                                <div className='card-body'>
                                    <Spinner display={this.state.loading}>
                                        {this.state.places.length !== 0 ? <div className='list-group list-group-flush'>
                                            {
                                                this.state.places && this.state.places.map((place, index) => {
                                                    return (
                                                        <div className='list-group-item d-flex align-items-center' key={index} onClick={() => { this.onSelectPlace(place) }}>
                                                            <div className='mr-auto'>
                                                                <p className='font-weight-bold mb-0'>{place.name}</p>
                                                                <div className='small text-muted mb-0'>{place.description}</div>
                                                                <div className='small text-muted mb-0'><a className='text-dark font-weight-bold' href={`tel:${place.phone}`}>{place.phone}</a></div>
                                                                <div className='small text-muted mb-0'>Sun - Closed, M-F 9-5, Sat 12-5</div>
                                                                {place.CategoryId === 8 ? <div className='small text-muted mb-0'>Delivery, Carryout, Cubside</div> : ''}
                                                                <div className='small text-muted mb-1'><a href={place.website} target='_blank' >Website</a></div>
                                                            </div>
                                                            <BsChevronRight />
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div> : <div className='text-center'>No Business Found Nearby.<span><br></br>Please search a different location</span></div>}
                                    </Spinner>
                                </div>
                            </div>
                        </div>
                        <div className='col-8 h-100 p-0'>
                            <Map google={this.props.google} minZoom={6} maxZoom={18} center={center} initialCenter={center} onDragend={this.centerMoved} onZoomChanged={this.handleZoomChanged} onClick={this.onMapClicked}>
                                {
                                    this.state.places.map((place, index) => {
                                        return <Marker className='labels'
                                            key={index}
                                            id={index} position={{ lat: place.location.lat, lng: place.location.lng }} onClick={this.onMarkerClick} place={place} />
                                    })
                                }
                                <InfoWindow marker={this.state.activeMarker} visible={this.state.showingInfoWindow}>
                                    <div>
                                        <p className='font-weight-bold mb-1'>{this.state.selectedPlace && this.state.selectedPlace.name}</p>
                                        <div className='text-muted mb-2'>{this.state.selectedPlace && this.state.selectedPlace.description}</div>
                                        <div className='text-muted mb-0'>Sun - Closed, M-F 9-5, Sat 12-5</div>

                                        {this.state.selectedPlace && this.state.selectedPlace.type_id === 8 ? <div className='text-muted mb-0'>Delivery, Carryout, Cubside</div> : ''}
                                    </div>
                                </InfoWindow>
                            </Map>
                        </div>
                    </div>
                </div>
                <Features />
                <Sponsors />
                <BannerAd />
                <Footer />
            </div>
        )
    }
}


export default GoogleApiWrapper({ apiKey: 'myapikey' })(Places);

import React，{Component}来自“React”
从“google maps react”导入{Map，GoogleApiWrapper，Marker，InfoWindow}；
从“react places autocomplete”导入PlacesAutocomplete，{geocodeByAddress，getLatLng}；
从“axios”导入axios
从“../components/Header”导入标题
从“../components/Footer”导入页脚
从“../components/Features”导入要素
从“../components/赞助商”导入赞助商
从“../components/BannerAd”导入BannerAd
从“../components/Spinner”导入微调器
从“../../config”导入{url}
从“反应图标/B”导入{BsChevronRight}
类放置扩展组件{
建造师（道具）{
超级（道具）
此.state={
地址：''，
类别ID:0，
类别：[]，
地点：[]，
加载：false，
中心：{lat:null，lng:null}，
我的位置：{lat:39.2820678，lng:-76.5916704}，
活动标记：{}，
ShowingInfo窗口：false，
所选地点：{}，
范围：3，
}
}
componentDidMount（）{
这个.getCategories（）；
让地址=“”
if（this.props.match.params.address！=“未定义”）{
地址=this.props.match.params.address
}
这是我的国家({
地址:地址:，
categoryId:this.props.match.params.category，
中心：{lat:this.props.match.params.lat，lng:this.props.match.params.lng}
}，（）=>{this.getPlaces（）；}）
}
getCategories=async（）=>{
等待此.setState（{loading:true}）
get（url+‘类型’）。然后（（响应）=>{
this.setState（{categories:response.data，load:false}）
}).catch（（错误）=>{
console.log（错误）
})
}
getPlaces=async（）=>{
等待此.setState（{loading:true}）
get（url+`places？lat=${this.state.center.lat}&lng=${this.state.center.lng}&typeId=${this.state.categoryId}&range=${this.state.range}）
。然后（异步（响应）=>{
等待this.setState（{places:response.data，loading:false}）
})
.catch（（错误）=>{
console.log（错误）
})
}
handleChange=地址=>{
this.setState（{address}）；
};
handleSelect=异步值=>{
const address=等待geocodeByAddress（值）；
const center=wait getLatLng（地址[0]）；
等待这个.setState（{center，address:value}）；
等待此消息。getPlaces（）；
};
onChange=async（事件）=>{
等待这个.setState（{[event.target.name]：event.target.value}）；
等待此消息。getPlaces（）
}
onSelectPlace=async（place）=>{
const center={lat:place.location.lat，lng:place.location.lng}
const address=place.name；
等待此.setState（{center，address，selectedPlace:place，}）；
}
onMarkerClick=（道具、记号笔、e）=>{
这是我的国家({
选择地点：props.place，
活动标记器：标记器，
showingInfoWindow：真
});
}
centerMoved=（地图道具，地图）=>{
设lat=map.center.lat（）；
设lang=map.center.lng（）；
this.setState（{center:{lat:lat，lng:lang}，地址：''}）；
这个.getPlaces（）；
}
onMapClicked=（）=>{
if（此.state.showiningInfo窗口）{
这是我的国家({
ShowingInfo窗口：false，
活动标记：空
});
}
}
handleZoomChanged=（mapProps，map）=>{
设lat=map.center.lat（）；
设lang=map.center.lng（）；
{
map.zoom==18？this.setState（{range:1，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==17？this.setState（{range:1，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==16？this.setState（{range:1，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==15？this.setState（{range:1.7，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==14？this.setState（{range:2.697331，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==13？this.setState（{range:8，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==12？this.setState（{range:15，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==11？this.setState（{range:22，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==10？this.setState（{range:60，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==9？this.setState（{range:100，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==8？this.setState（{range:300，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）
：map.zoom==7？this.setState（{range:750，center:{lat:lat，lng:lang}}，（）=>{this.getPlaces（）}）