Google Map React и InfoWindow - проблема с onChildClick - PullRequest
0 голосов
/ 29 апреля 2020

Я пытаюсь отобразить информационное окно для маркера на карте, созданной с помощью Google Map React .

Сначала возникла проблема с отображением информационного окна для выбранного маркера, но Я понял это с кодом ниже

// InfoWindow component
const InfoWindow = (props) => {

    const infoWindowStyle = {
        position: 'relative',
        top: '-110px',
        left: '-100px',
        width: 300,
        backgroundColor: 'white',
        boxShadow: '0 2px 7px 1px rgba(0, 0, 0, 0.3)',
        padding: 10,
        fontSize: 14,
        zIndex: 100,
    };

    const infoWindowClose = {
        float: 'right',
        fontSize: 11,
    };

    return (
        <div style={infoWindowStyle}>
            <div style={infoWindowClose} onClick={setSelectedMarker('')}>X</div>
            <div style={{ fontSize: 16 }}>
                Marker ID: {props.id} <br/>
                Latitude: {props.lat} <br/>
                Longitude: {props.lng} <br/>
            </div>

        </div>
    );
};

Основной компонент:

const [selectedMarker, setSelectedMarker] = useState('');

....

const _onChildClick = (key, childProps) => {
    setShowInfoView(!showInfoView);
    setSelectedMarker(childProps.id);
};


return (

    ....

    <GoogleMapReact
        bootstrapURLKeys={{
            key: process.env.REACT_APP_GOOGLE_KEY
        }}
        zoom={zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({map}) => {
            mapRef.current = map;
        }}
        onChange={({zoom, bounds}) => {
            setZoom(zoom);
            setBounds([
                bounds.nw.lng,
                bounds.se.lat,
                bounds.se.lng,
                bounds.nw.lat
            ]);
        }}
        onChildClick={_onChildClick}
    >

        {clusters.map(cluster => {
            const [longitude, latitude] = cluster.geometry.coordinates;
            const
                {
                    cluster: isCluster,
                    point_count: pointCount
                } = cluster.properties;

            if (isCluster) {
                return (
                    ....
                )
            }
            if (!isCluster) {
                return (
                    <Marker
                        key={cluster.properties.id}
                        lng={longitude}
                        lat={latitude}
                        show={showInfoView}
                        marker={cluster}
                        id={cluster.properties.id}
                    >
                        <div>
                            <Fragment>
                                <RoomIcon
                                    color={"secondary"}
                                    cursor={"pointer"}
                                    onClick={() => {
                                        mapRef.current.panTo({
                                            lat: latitude,
                                            lng: longitude
                                        });
                                        onMarkerClick(props);
                                    }}
                                />
                                {selectedMarker === cluster.properties.id &&
                                    <InfoWindow
                                        id={cluster.properties.id}
                                        lng={longitude}
                                        lat={latitude}
                                    /> }
                            </Fragment>
                        </div>
                    </Marker>
                );
            }
        })}

    </GoogleMapReact>

...

)

, но в результате у меня возникли другие проблемы с onChildClick, которые я не могу решить:

  • onChildClick не работает, когда компонент <InfoWindow> перемещен над компонентом <RoomIcon> в коде выше
  • , когда я попытаюсь найти обходной путь для onChildClick он будет перемещать / pu sh маркер с InfoWindow из местоположения, чтобы держать его в центре экрана, а не в месте.

Есть какие-нибудь мысли по этому поводу?

...