0

地图加载但没有任何实际内容。用于缩放等的侧边栏加载正常，但没有实际地图。我已经玩过很多语法，但没有任何结果。我是在做一些根本错误的事情，还是有一个可以快速修复的小语法错误？“lati”记录到控制台就好了。我仍然认为自己是 react.js 的学生，所以如果这看起来有点业余时间，我很抱歉，但我很喜欢社区可以提供的任何见解。谢谢你。

尝试传递道具的变量大约是第三次尝试使其运行。我试图直接传递道具，这甚至无法渲染。

import MapCS from './Map';
import Weather from './Weather'
import {
  BrowserRouter
} from 'react-router-dom'
import Stats from'./Stats'

//Game Component for Notre dame
class NotreDame extends Component {
  render() {
    return (
      <BrowserRouter>
          <div>
              <h2>Louisville vs Notre Dame @ Cardinal Stadium</h2>
              <Weather location="louisville" />
              <Stats />
              <MapCS lat="36.166479" lon="86.7712898"/>
          </div>
      </ BrowserRouter>
    )
  }
}

export default NotreDame;

import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

//Map Styling
const mapStyles = {
  width: '100%',
  height: '500px'
};

// Map Component
class MapCS extends Component {
  render(props) {

    const lati = this.props.lat
    const long = this.props.lon
    console.log(lati)
    return (
      <div>
        <Map
          google={this.props.google}
          zoom={17}
          style={mapStyles}
          initialCenter={{
            lat: lati,
            lng: long
        }}
        />
      </div>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: "*redacted*"
})(MapCS);```
4

0 回答 0