我无法在屏幕上呈现我的 Google map 。 我看过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 看起来像这样:
我的控制台也没有 js 错误。
我在这里错过了什么? 谢谢!!!
最佳答案
尝试只导入 css 而不要像这样命名它们:
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)
MoobieMap 和 withstyles 之间的连接是什么?
希望对您有所帮助,请告诉我您的 .map
声明了宽度和高度...
关于javascript - react map 不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44864037/