React map无法渲染

时间:2017-07-01 18:15:47

标签: javascript css reactjs google-maps-api-3

我无法在屏幕上显示我的Google地图。 我见过this question,但即使这样做也没有解决我的问题。

我有什么:

import React from 'react'
import GoogleMap from 'google-map-react';
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './CarMap.css'

class MoobieMap extends React.Component {

    constructor(props){
        super(props)
    }

    render() {
        return (
            <div className={s.map}>
            <GoogleMap apiKey={API_KEY} center={{lat: -23.5925282, long: -46.6891377}} zoom={3}/>
            </div>
        )
    }
}

export default withStyles(s)(MoobieMap)

import React from 'react'
import Layout from '../../components/Layout'
import MoobieMap from './CarMap'

const title = 'Mapa de carros'

export default {

  path: '/car-map',

  async action() {
    return {
      title,
      chunk: 'component',
      component: <Layout title={title}><MoobieMap /></Layout>,
    }
  },

}

和css:

.map {
    width: 100%;
    height: 400px;
}

我也在使用React入门套件。 我的DOM看起来像这样:enter image description here

我的控制台中也没有js错误。

我在这里缺少什么? 感谢!!!

修改 enter image description here

1 个答案:

答案 0 :(得分:0)

尝试仅导入css而不是命名它们:

imresize

MoobieMap和withstyles之间的联系是什么?

我希望它有所帮助,请告诉我你的import React from 'react' import GoogleMap from 'google-map-react'; import withStyles from 'isomorphic-style-loader/lib/withStyles' import './CarMap.css' class MoobieMap extends React.Component { constructor(props){ super(props) } render() { return ( <div> <GoogleMap apiKey={API_KEY} center={{lat: -23.5925282, long: -46.6891377}} zoom={3} className="map"/> </div> ) } } export default withStyles(s)(MoobieMap) 宽度和高度已宣布......