Javascript 将道具传递到经纬度（谷歌地图）

我无法通过谷歌地图将这些道具传递给Langitute和longitude。我想给他们一个api数据的值

错误

这是密码

import { GoogleMap } from "react-google-maps";
import React from "react";

export default function Goomap(props) {
  return (
    <div>
      <GoogleMap
        defaultZoom={10}
        defaultCenter={{
          lat: props.result.location.coordinates.latitude,
          lng: props.result.location.coordinates.longitude
        }}
      />
    </div>
  );
}

import React from "react";
import { withScriptjs, withGoogleMap } from "react-google-maps";
import Goomap from "./goomap";
const WrappedMap = withScriptjs(withGoogleMap(Goomap));

class MapGoogle extends React.Component {
  render() {
    return (
      <div>
        <div style={{ width: "30vw", height: "100vh" }}>
          <WrappedMap
            googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.REACT_APP_GOOGLE_KEY}`}
            loadingElement={<div style={{ height: "100%" }} />}
            containerElement={<div style={{ height: "100%" }} />}
            mapElement={<div style={{ height: "100%" }} />}
          />
        </div>
      </div>
    );
  }
}

export default MapGoogle;


import React from "react";
import DataListItem from "../feature/datalist";
import Axios from "axios";
import MapGoogle from "./gmap";

class Data extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      results: [],
      loading: true
    };
  }

  componentDidMount() {
    Axios.get("https://randomuser.me/api/").then(res => {
      const results = res.data.results;
      this.setState({ results, loading: false });
      console.log(results);
    });
  }

  render() {
    const { results, loading } = this.state;

    if (loading) {
      return <div>loading...</div>;
    }
    if (!results) {
      return <div>data not found</div>;
    }

    return (
      <div>
        {results.map(result => {
          return (
            <div key={result.id}>
              <DataListItem result={result} />
              <MapGoogle result={result}></MapGoogle>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Data;

我无法传递props.result.location.coordinates.latitude和props.result.location.coordinates.longitude，但当我像props.result.phone一样传递时，它会工作，代码如下

import React from "react";

export default function DataListItem(props) {
  return (
    <div>
      <div>
        {props.result.name.first} {props.result.name.last}
      </div>
      <div>Developer</div>
      <div>{props.result.phone}</div>
      <div>{props.result.email}</div>
      <div>
        {props.result.location.street} {props.result.location.city}
        {props.result.location.state} {props.result.location.postcode}
      </div>
      <div>{props.result.location.coordinates.latitude}</div>
      <div>{props.result.location.coordinates.longitude}</div>
      <img src={props.result.picture.large}></img>
    </div>
  );
}

谢谢，那是因为你的result.location对象不在那里。我不熟悉react谷歌地图库，但从我所知，您并没有向谷歌地图传递道具

尝试：

工作示例：

---

初始渲染，结果为空。不，它不是空的，因为我可以传递数据，如姓名、电话、电子邮件等。问题是我无法通过尝试注释Axios将数据传递给lat和lng。进入componentDidMount，查看结果。地图…数据未显示只是添加了一个示例。看看@SteFandyso在const mapgoogle中放置这样的道具真的很有效。谢谢，非常有帮助

// replace this line
const WrappedMap = withScriptjs(withGoogleMap(Goomap));
// with this
const WrappedMap = withScriptjs(withGoogleMap(props => <Goomap {...props}/>));

 defaultCenter={{
       lat: parseFloat(props.result.location.coordinates.latitude),
       lng: parseFloat(props.result.location.coordinates.longitude)
     }}