Closed mshameer closed 7 years ago
Polyline is not working on path change with setState
const TrackGoogleMap = withGoogleMap(props => ( <GoogleMap defaultZoom={14} defaultCenter={props.path[0]} > {props.path.length && <Polyline options={{strokeColor: '#2e10ff', geodesic: true }} path={props.path} />} </GoogleMap> )); class Register extends Component { state = { path: [{lat: 8.5088733, lng: 76.909832}, {lat: 8.5100829, lng: 76.9087966}, {lat: 8.5107991, lng: 76.9081663}], } componentDidMount() { const options = { enableHighAccuracy: false, timeout: 1000, maximumAge: 0 }; navigator.geolocation.getCurrentPosition(this.onLocationChange); const id = navigator.geolocation.watchPosition(this.onLocationChange, (err) => { console.warn('ERROR(' + err.code + '): ' + err.message); }, options); } onLocationChange = (pos) => { var crd = pos.coords; const path = this.state.path; path.push({ lat: crd.latitude, lng: crd.longitude }); this._timeoutId = setTimeout(() => { this.setState({path}) }, 3000); } render() { const { errors, email, password, firstName, registerUser, inputChange } = this.props; console.log('this.state.path'); return ( <Layout title="Register"> <div id="page-index" className="page" style={{paddingTop:60}}> <TrackGoogleMap loadingElement={ <div style={{ height: `100%` }}> <CircularProgress /> </div> } containerElement={ <div style={{ height: window.innerHeight }} /> } mapElement={ <div style={{ height: window.innerHeight, width: `100%` }} /> } path={this.state.path} /> </div> </Layout>); } }
wtf is this :-)?
Polyline is not working on path change with setState