下午好!我使用该库来响应Google地图。如何获得地图中心的坐标?

时间:2018-07-02 22:22:57

标签: reactjs google-maps google-maps-api-3 react-google-maps

我使用库react-google-maps。可以使用getCenter()获取坐标,但是我不能。如何在组件中制作一个将中心坐标发送到父函数的按钮,以及如何从中心获取这些坐标?你知道吗谢谢!

const Map = compose(
    withProps({
        googleMapURL:
            "https://maps.googleapis.com/maps/api/js?key=AIzaSyB8ECfIjkNyE2AVBlG4Fpd4rD2Y4q5Ytpk",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px`, }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    lifecycle({
        componentDidMount() {
            const refs = {}

            this.setState({
                onMapMounted: ref => {
                    refs.map = ref;
                    console.log(refs.map.getCenter())
                },
            })
        },
    }),
    withScriptjs,
    withGoogleMap
)((props) =>
    <GoogleMap markers={markers}
        ref={props.onMapMounted}
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
        {markers.map( function (obj, index) {
            return (
                <div key={index}>
                    <Marker
                        title="Hello World!"
                        position={{ lat: obj.position.lat, lng: obj.position.lng }}
                        onClick={props.onToggleOpen}
                    >
                        {props.isOpen &&
                            <InfoWindow onCloseClick={props.onToggleOpen}>
                                 <div>
                                     {obj.title}
                                </div>
                            </InfoWindow>
                        }
                    </Marker>
                </div>
            );
        })
        }
        <Polygon path={path} />
    </GoogleMap>
)

0 个答案:

没有答案