Question

我试图在通过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的解决方法时，它将使用InfoWindow滑动/推入标记，使其不在屏幕的中央，而不是在该位置。

对此有何想法？

Google Map React和InfoWindow-onChildClick问题

0 个答案: