Javascript 反应：谷歌地图API不使用传递的Lon和Lat渲染地图

我正在将我的道具从父组件传递到子组件。在道具中，还有一些其他东西是我的经度和纬度，我的谷歌地图组件应该呈现这些东西。现在，当我尝试渲染时，我的控制台会对setposition和setCenter显示以下内容：

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

我已经检查并确保我的数字实际上是数字，甚至在渲染之前解析它们，现在我只得到了一个空白画布

请帮忙。附加的第一个代码是我的GoogleMapComponent，每当传递lat和long时都会调用它：

import React, { Component } from "react";

class Map extends Component {
  componentDidMount() {
    const google = window.google;
    let gMap = new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: this.props.lat,
        lng: this.props.lon
      }
    });
    new google.maps.Marker({
      position: {
        lat: this.props.lat,
        lng: this.props.lon
      },
      map: gMap,
      title: "Hello World!"
    });
  }
  render() {
    return <div className="mapped" ref="map" />;
  }
}

export default Map;

import React，{Component}来自“React”；
类映射扩展组件{
componentDidMount（）{
const google=window.google；
让gMap=new google.maps.Map（this.refs.Map{
缩放：12，
中心：{
拉特：这个，道具，拉特，
液化天然气：这是道具
}
});
新的google.maps.Marker({
职位：{
拉特：这个，道具，拉特，
液化天然气：这是道具
},
地图：gMap，
标题：“你好，世界！”
});
}
render（）{
返回；
}
}
导出默认地图；

这是我的代码，我将贴图组件传递给它，它应该渲染lat和lon。在查看代码时，请记住我的lat和lon正在传递

import React, { Component } from "react";
import Map from "./mapcomponent";

class SingleEvent extends Component {
  render() {
    let {
      situation,
      time,
      day,
      date,
      address0,
      address1,
      address2,
      venue,
      Lon,
      Lat
    } = this.props.activeEvent;
    return (
      <div className="single-event">
        <div className="calendar-container">
          <h4>{day}</h4>
          <h4>{date}</h4>
          <h4> {time} </h4>
        </div>
        <div className="details">
          <div className="ceremony-container">
            <h1>{situation}</h1>
            <h2>{address0}</h2>
            <h3>{address1}</h3>
            <h3>{address2}</h3>
          </div>
          <div className="images">
            <img src={venue} alt="something" />
            <Map ref="mapped" lon={Lon} lat={Lat} />
          </div>
        </div>
      </div>
    );
  }
}

export default SingleEvent;

import React，{Component}来自“React”；
从“/mapcomponent”导入地图；
类SingleEvent扩展组件{
render（）{
让{
情况,，
时间
白天
日期，
地址0，
地址1，
地址2，
地点
朗，
拉特
}=this.props.activeEvent；
返回(
{day}
{date}
{time}
{情况}
{address0}
{address1}
{address2}
);
}
}
导出默认单事件；

您是否在GoogleMapComponent中记录了

this.prop.lat

和

this.prop.lon

的

typeof

值？除非您从道具获得的值不是数字，否则看起来不会有问题。仅当typeof Lat是Google Maps中的一个长数值（称为Lng而非long）时，尝试使用if条件渲染地图。修复该条件可能有助于正确识别为Lng=经度