我通过使用google-maps-react实现了google map组件以查看当前位置和标记拖动功能,现在我想用这种方式尝试的纬度和经度填充我的redux表单字段
Location.js
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import { Field, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";
class Location extends Component {
constructor(props) {
super(props);
this.state = {
lat: null,
lng: null,
markers: []
};
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(position =>
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude
})
);
}
onMarkerDragEnd = coord => {
const { latLng } = coord;
const lat = latLng.lat();
const lng = latLng.lng();
this.setState({
lat: lat,
lng: lng
});
console.log(lat, lng);
};
render() {
if (!this.props.loaded) {
return <div>Loading...</div>;
}
const style = {
width: "100%",
height: "100vh"
};
return (
<Map
google={this.props.google}
zoom={11}
style={style}
initialCenter={{
lat: this.state.lat,
lng: this.state.lng
}}
center={{
lat: this.state.lat,
lng: this.state.lng
}}
onClick={this.mapClicked}
>
<Marker
title={"Geolocation"}
position={{
lat: this.state.lat,
lng: this.state.lng
}}
draggable={true}
onDragend={(t, map, coord) => this.onMarkerDragEnd(coord)}
/>
</Map>
);
}
}
const selector = formValueSelector("registershop");
const mapStateToProps = state => {
//
//
};
export default GoogleApiWrapper({
apiKey: "......"
})(connect(mapStateToProps)(Location));
Register.JS
import Location from "../common/Location";
class Register extends Component {
const { handleSubmit } = this.props;
return (
<div>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<label>Lat:</label>
<Field name="lat" component="input" type="number" step="0.01" />
<label>Lng:</label>
<Field name="lng" component="input" type="number" step="0.01" />
</form>
<Location/>
<div>
)
}
当用户要显示到注册组件的路线时,我要使用 componentDidMount 显示他/她的当前位置,并且还想给用户提供机会选择他们的位置拖动标记
我是redux表单的新手,所以对于如何将经度和纬度绑定到reduxform到提交我没有更好的主意,请帮助我