Google Maps в редукционной форме - PullRequest
Новая
       6

Google Maps в редукционной форме

0 голосов
/ 05 июля 2018

Я хотел бы использовать карты Google для получения длинных и длинных с использованием формы редукса. Я создаю это: 

import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

const MyMapComponent = compose(
    withProps({
        googleMapURL:
            'https://maps.googleapis.com/maps/api/js?key=AIzaSyCYSleVFeEf3RR8NlBy2_PzHECzPFFdEP0&libraries=geometry,drawing,places',
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    lifecycle({
        componentWillMount() {
            const refs = {};

            this.setState({
                position: null,
                onMarkerMounted: ref => {
                    refs.marker = ref;
                },

                onPositionChanged: () => {
                    const position = refs.marker.getPosition();
                    console.log(position.toString());
                },
            });
        },
    }),
    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
        {props.isMarkerShown && (
            <Marker
                position={{ lat: -34.397, lng: 150.644 }}
                draggable={true}
                ref={props.onMarkerMounted}
                onPositionChanged={props.onPositionChanged}
            />
        )}
    </GoogleMap>
));

class MyParentComponentWrapper extends React.PureComponent {
    state = {
        isMarkerShown: false,
    };

    render() {
        return (
            <div>
                <MyMapComponent isMarkerShown={true} />
            </div>
        );
    }
}

export default MyParentComponentWrapper;

Но он не возвращает никаких значений и не показывает широту и долготу в поле. Что мне делать? это будет console.log lat и long, когда пользователь перетаскивает маркер

1 Ответ

0 голосов
/ 08 июля 2018

Если вы хотите, чтобы MyMapComponent вернул значение MyParentComponentWrapper, просто передайте функцию обратного вызова в качестве опоры. Просто измените родительский компонент на:

<MyMapComponent isMarkerShown={true} onMakerPositionChanged={this.onMakerPositionChanged}/>

и компонент карты для:

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

См. Рабочий пример здесь

...