открыть маркер реагировать на клик

Question

Я использую реагирование и карты Google в своем проекте

Я хочу показать маркер, но когда я нажимаю на мой маркер, все мои маркеры появляются

Я хочу открыть только один маркер ввремя (onclick) вы можете сказать мне, что не так с моей функцией?

 const MapWithAMakredInfoWindow = compose(
        withStateHandlers(() => ({
            isOpen: false,
        }), {
            onToggleOpen: ({ isOpen }) => () => ({
                isOpen: !isOpen,
            })
        }),

        withScriptjs,
        withGoogleMap
    )(props =>
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: 44.8350088, lng: -0.5872689999999999 }}
        >

            {this.state.PartenaireData.map(function (item, i) {
                if (item.coordinates.latitude && item.coordinates.longitude)
                    return (
                        <Marker
                            position={{ lat: item.coordinates.latitude, lng: item.coordinates.longitude }}
                            onClick={props.onToggleOpen}
                            key={i}
                        >
                            { (props.isOpen ) &&
                            <InfoWindow  onCloseClick={props.onToggleOpen}>
                                <div>
                                    <div>{item.titre}</div>
                                    <div >autre data</div>
                                </div>
                            </InfoWindow>}
                        </Marker>)
            })}


        </GoogleMap>
    );

Answer 1

isOpen и onToggleOpen должны быть свойствами Marker, а не GoogleMap.

Передав их в GoogleMap, вы сделали их глобальными (одинаковыми для всех маркеров).Поэтому установка isOpen на true откроет все маркеры.

Может быть что-то вроде этого

const MapWithAMakredInfoWindow = compose(
    withScriptjs,
    withGoogleMap
)(props =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 44.8350088, lng: -0.5872689999999999 }}
    >

        {this.state.PartenaireData.map(function (item, i) {
            if (item.coordinates.latitude && item.coordinates.longitude)
                return (
                    compose(
                        withStateHandlers(() => ({
                            isOpen: false,
                        }), {
                            onToggleOpen: ({ isOpen }) => () => ({
                                isOpen: !isOpen,
                            })
                        })
                    )(markerProps =>
                        <Marker
                            position={{ lat: item.coordinates.latitude, lng: item.coordinates.longitude }}
                            onClick={markerProps.onToggleOpen}
                            key={i}
                        >
                            {(markerProps.isOpen) &&
                                <InfoWindow onCloseClick={markerProps.onToggleOpen}>
                                    <div>
                                        <div>{item.titre}</div>
                                        <div >autre data</div>
                                    </div>
                                </InfoWindow>}
                        </Marker>
                    )
                );
        })}
    </GoogleMap>
);