React-google-maps: открывается несколько информационных окон

Вероятно, это будет глупо простой вопрос с ответом, но, пожалуйста, потерпите меня. Я пытаюсь запустить реагировать на карты Google с несколькими маркерами с информационными окнами. Вот код:

const MapWithADirectionsRenderer = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyDf-yIqxErTkbWzKhLox7nAANnrfDIY190&libraries=geometry,drawing,places",
        loadingElement: <div style = {{ height: `100%` }} />,
        containerElement: <div style = {{ height: `800px` }} />,
        mapElement: <div style = {{ height: `100%` }} />,
    }),
    withStateHandlers(() => ({
        isOpen: false,
    }), {
        onToggleOpen: ({ isOpen }) => () => ({
            isOpen: !isOpen,
        })
    }),
    withScriptjs,
    withGoogleMap,
    })
)(props =>
    <GoogleMap
        defaultZoom = {13}
        defaultCenter = {new google.maps.LatLng(42.357064, -71.062577)}
    >

        <Marker
            position = {{ lat: 42.3381437, lng: -71.0475773 }}
            onClick = {props.onToggleOpen}
        >
            {props.isOpen && <InfoWindow onCloseClick = {props.onToggleOpen}>
                <h3>South Boston</h3>
            </InfoWindow>}
        </Marker>
        <Marker
            position = {{ lat: 42.3875968, lng: -71.0994968 }}
            onClick = {props.onToggleOpen}
        >
            {props.isOpen && <InfoWindow onCloseClick = {props.onToggleOpen}>
                <h3>Somervil</h3>
            </InfoWindow>}
        </Marker>

        {props.directions && <DirectionsRenderer directions = {props.directions} />}
    </GoogleMap>
);

Когда я нажимаю один из маркеров, информационные окна для всех маркеров открываются. Как мне просто открыть информационное окно маркера, который я нажимаю?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 010
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Предлагаю ввести компонент:

class MarkerWithInfoWindow extends React.Component {

    constructor() {
        super();
        this.state = {
            isOpen: false
        }
        this.onToggleOpen = this.onToggleOpen.bind(this);
    }

    onToggleOpen() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    render() {
        return (<Marker
            position = {this.props.position}
            onClick = {this.onToggleOpen}>
            {this.state.isOpen && <InfoWindow onCloseClick = {this.onToggleOpen}>
                <h3>{this.props.content}</h3>
            </InfoWindow>}
        </Marker>)
    }
}

для управления информационным окном для каждого маркера через состояние MarkerWithInfoWindow:

 <GoogleMap
    defaultZoom = {13}
    defaultCenter = {new google.maps.LatLng(42.357064, -71.062577)}>

    <MarkerWithInfoWindow position = {{ lat: 42.3381437, lng: -71.0475773 }} content = "South Boston" />
    <MarkerWithInfoWindow position = {{ lat: 42.3875968, lng: -71.0994968 }} content = "Somervil" />

</GoogleMap>

Демо

Другие вопросы по теме