时间戳

首页 > 解决方案 > reactjs不能将道具传递给纬度和经度（谷歌地图）

javascript - reactjs不能将道具传递给纬度和经度（谷歌地图）

问题描述

我无法从谷歌地图将此道具传递给经度和经度。我想给他们一个来自 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>
  );
}

谢谢

标签： javascriptreactjsgoogle-mapsaxiosreact-props

解决方案

那是因为你的result.location对象不存在。我不熟悉react-google-maps图书馆，但据我所知，你没有将道具传递给Goomap.

尝试：

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

此外，您将需要使用parseFloat()方法为您的lat lng

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

工作示例： https ://codesandbox.io/s/intelligent-diffie-9d5b3

推荐阅读