Reactjs redux格式的谷歌地图

我想使用谷歌地图获取使用redux表单的lat和long。我创建了以下内容：

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;

从“React”导入React；
从“重新组合”导入{compose，withProps，lifecycle}；
从“react GoogleMaps”导入{withScriptjs，withGoogleMap，GoogleMap，Marker}；
常量MyMapComponent=compose(
用道具({
谷歌地图网址：
'https://maps.googleapis.com/maps/api/js?key=AIzaSyCYSleVFeEf3RR8NlBy2_PzHECzPFFdEP0&libraries=geometry，图纸，位置，
加载元素：，
集装箱运输：，
mapElement:，
}),
生命周期({
组件willmount（）{
常量refs={}；
这是我的国家({
位置：空，
onMarkerMounted:ref=>{
refs.marker=ref；
},
onPositionChanged:（）=>{
const position=refs.marker.getPosition（）；
console.log（position.toString（））；
},
});
},
}),
用ScriptJS，
用谷歌地图
)（道具=>(
{props.ismarkersown&&(
)}
));
类MyParentComponentWrapper扩展了React.PureComponent{
状态={
伊斯马克镇：错，
};
render（）{
返回(
);
}
}
导出默认的MyParentComponentWrapper；

---

但它不返回任何值，也不在字段中显示lat和long我该怎么办？如果希望

MyMapComponent

将值返回到

MyParentComponentWrapper

只需将回调函数作为道具传递，则当用户拖动标记时，它将console.log lat和long。只需将父组件更改为：

和映射组件，以：

onPositionChanged:（）=>{
const position=refs.marker.getPosition（）；
console.log（position.toString（））；
此.props.onMakerPositionChanged（位置）；
}，

---

参见工作示例

您好，我喜欢在redux表单中执行。如何执行？您能澄清您的问题吗？更好的是，请将我发布的工作示例与redux表单结合使用。我正在使用redux表单。在redux表单中，我必须实现上面所示的gooogle映射，但我可以“无法获取值或将值传递给redux表单。通常，您可以通过调用

this.props.change（fieldName，value）

在使用

redux表单的组件中设置redux表单中的值（我在您的代码中没有看到）。我的简单redux表单无法从google map获取redux表单中的值。”