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，我很難找到我的出路。

如果有人能告訴我需要做什麼，那會很棒。

在此先感謝

來源

2016-12-16 ckim16

這是因爲你需要加載谷歌地圖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} />

來源

2016-12-16 04:55:46 Freez

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

Googlemap未在React中呈現

回答

相關問題