Question

从服务器接收数据后如何更新ReactGoogleMap？

这就是我使用react-google-maps API创建Google Map的方式。

import React from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker , Polyline} from "react-google-maps"
import TextField from "@material-ui/core/TextField";
import Button from "components/CustomButtons/Button.jsx";
import './Maps.css';
import axios from "axios";

const pathCoordinates = [
        { lat: 1.322459, lng: 103.853972 },
        { lat: 1.39227, lng: 103.752 }
    ];

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `80vh` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: 1.322459, lng: 103.853972  }}
  >
  <div id='map_controls' class='toolbox'>
  <TextField 
    id="date"
    label="Date"
    type="date"
    defaultValue= ""
    InputLabelProps={{
        shrink: true,
        style: { color: '#fff' }
    }}
    value={props.date}
    onChange={props.handleChange('date')}
    />
    <Button color="primary" onClick={props.handleSubmit}>Select Date</Button>
  </div>
  {console.log("drawing...............")}
  {props.drawMap()}

  </GoogleMap>
)

const initialState = {
    date: "",
    data: []
};

class Maps extends React.Component {
    constructor(props) {
            super(props);
            this.state = initialState;
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
            this.drawMap = this.drawMap.bind(this);
          }

  componentDidMount() {
    console.log(" componentDidMount   "+this.state.date);
  }


    handleChange = name => event => {
    this.setState({ [name]: event.target.value });

  };

  handleSubmit(event) {

    const input = {};
    input["date"] = this.state.date;

    axios.post("localhost:4000/readMap", input)
    .then(response => {
      console.log({response});
      this.setState({data: response.data});

        })
    .catch(error => {console.log(error.response)});
    event.preventDefault();
  }

  drawMap(){

      if(!(this.state.date==="")){
      var rows = [];
        for (var i = 0; i < 2; i++) {

        if(i===0){
            rows.push(<Marker label= {(i+1).toString()} position={{ lat: 1.39227, lng: 103.752 }}  key={i} />);
        }else if(i===1){
            rows.push(<Marker label= {(i+1).toString()} position={{ lat: 1.322459, lng: 103.853972 }}  key={i} />);
        }else{

        }
    }
        return (<div>{rows}<Polyline
                path={pathCoordinates}
                geodesic={true}
                options={{
                    strokeColor: "#ff2527",
                    strokeOpacity: 0.75,
                    strokeWeight: 2
                }}
            /></div>);
      }else{
          console.log("no date");
      }

  }

  render() {
      this.drawMap();
    return (
      <MyMapComponent
        handleChange={this.handleChange}
        handleSubmit={this.handleSubmit}
        drawMap={this.drawMap}
      />
    )
  }
}

export default Maps;

从数据库接收数据后，我想绘制标记。我成功地从用户读取了输入（这是一个日期），并将此数据发送到服务器以从数据库中获取该日期的数据。数据已成功接收，并可以在控制台中打印。但是，我不知道如何更新MyMapComponent以显示此日期的标记。获取数据后，我再次运行drawMap（）函数，但是运行MyMapComponent后drawMap()没有更新。

Answer 1

我找到了解决方法。

render() {
      console.log("render::::::::::::::::::::");
    return (
      <MyMapComponent
        handleChange={this.handleChange}
        handleSubmit={this.handleSubmit}
        drawMap={this.drawMap}
      >
      {this.drawMap()}
      </MyMapComponent>
    )
  }

从服务器接收数据后如何更新React Google Map

1 个答案: