react-google-maps如何获得标记位置? [英] react-google-maps how does one get marker position?

问题描述

我阅读了文档，它方便地概述了可用的道具和方法.请在此处查看.

I read the docs and it conveniently outlines the props and methods available. Please look here.

我的问题是，此处给出示例组件:

My question is, given the example component here:

import {withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps";

class MyParentComponentWrapper extends Component { 
...

...// inside react component class
mapComponent() {
        const MyMapComponent = withScriptjs(withGoogleMap((props) =>{
            return (
                <GoogleMap
                    defaultZoom={18}
                    defaultCenter={{ lat: props.lat, lng: props.lng }}
                >
                    { props.isMarkerShown && <Marker onPositionChanged={()=>{
// This event will trigger the 
// call to update the state where lat and lng will go.

}} draggable position={{ lat: props.lat, lng: props.lng }} /> }
                </GoogleMap>
            )
        }))

        return (
            <MyMapComponent
                lat={this.state.form.location.latitude}
                lng={this.state.form.location.longitude}
                googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${env.google.apiKey}&v=3.exp&libraries=geometry,drawing,places`}
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
                isMarkerShown/>
        )
    }

...

看到onPositionChanged事件?我想更新包含lat和lng的MyParentComponentWrapper的状态，但是我不知道如何调用getPosition()来获取lat lng值.没有提供示例，文档看起来也不清楚...是否可以调用我不知道的Marker组件中的方法?如果您知道如何执行此操作，请提供一个示例以说明如何执行此操作吗?

See the onPositionChanged event? I want to update the state of MyParentComponentWrapper which contains lat and lng, but I have no idea how to call the getPosition() to get the lat lng values to do so. No examples were provided and the documentation looks unclear... Is there a way to call the methods within the Marker component that I am unaware of? If you know how to do this, can you please provide an example on how to do so?

推荐答案

onPositionChanged事件不提供触发的事件，但是您可以通过ref属性存储对Marker组件的引用:

onPositionChanged event does not provide the triggered event but you could store a reference to Marker component via ref attribute:

<GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
        <Marker position={{ lat: -34.397, lng: 150.644 }} draggable={true} ref={props.onMarkerMounted} onPositionChanged={props.onPositionChanged} />    
</GoogleMap>   

，然后在onPositionChanged事件中获得标记的位置，如下所示:

and then get the position of marker in onPositionChanged event like this:

lifecycle({
    componentWillMount() {
        const refs = {}

        this.setState({

            onMarkerMounted: ref => {
                refs.marker = ref;
            },

            onPositionChanged: () => {
                const position = refs.marker.getPosition();
                console.log(position.toString());
            }
        })
    },
}) 

演示

这篇关于react-google-maps如何获得标记位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！