Question

我目前正在使用React和谷歌地图开展项目，但我的谷歌地图没有得到渲染。我正在使用google-maps-react库，它说“加载地图......＆＃39;但它没有比这更进一步..我也很好奇，有一种方法可以设置这个库的默认中心。

这是我的Google地图代码..

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

如果有人能说出我需要做什么，那就太棒了。

提前致谢

Answer 1

这是因为您需要加载google maps 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} />

Googlemap不会在React中呈现

1 个答案: