Googlemap未在React中呈现

问题描述：

我目前正在使用React和Google Map进行项目工作，但我的谷歌地图未呈现。我正在使用谷歌地图反应库，它说'正在加载地图...'，但它并没有进一步超过这..我很好奇，有没有一种方法可以设置此库的默认中心。Googlemap未在React中呈现

这里是我的谷歌地图代码..

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

export default class GoogleMap extends Component { 

    render() { 
    return (
     <Map google={this.props.google} 
     style={{width: '100%', height: '100%', position: 'relative'}} 
     zoom={10}> 
     </Map> 
    ); 
    } 
}

，这里是我的index.js

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import axios from 'axios'; 
import _ from 'lodash'; 

import TruckList from './components/truck_list'; 
import GoogleMap from './components/google_map'; 

const url = `https://data.sfgov.org/resource/6a9r-agq8.json`; 
const truckArr = []; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    const self = this; 
    self.state = { truckArr: [] }; 

    axios.get(url) 
    .then((truckList) => { 
     _.forEach(truckList.data, (truck) => { 
     truckArr.push(truck); 
     }); 
     self.setState({ truckArr }); 
    }); 
    } 

    render() { 
    return (
     <div className="app"> 
     <GoogleMap /> 
     <TruckList list={this.state.truckArr}/> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<App/>, document.querySelector('.container'));

我需要完成这第一步能够向前推进，但由于这是我的第一次使用谷歌地图与React，我很难找到我的出路。

如果有人能告诉我需要做什么，那会很棒。

在此先感谢

答

这是因为你需要加载谷歌地图API的脚本。

1 /获取密钥from here

2 /在HTML脚本<body>标签

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
</script>

3 /注入全球google对象添加到您GoogleMap组件

<GoogleMap google={window.google} />

OMG它作品。非常感谢！！ – ckim16

Googlemap未在React中呈现

相关推荐