反应谷歌地图没有出现

Question

react-google-maps没有显示在屏幕上。我有一个主页组件，它正在渲染一个容器地图导航组件，该组件正在渲染视图地图组件。基本上是首页->地图导航->地图

我正在尝试显示一个简单的地图，但不起作用。

我正在遵循本教程 -> https://tomchentw.github.io/react-google-maps/basics/simple-map

当我检查浏览器中的元素时，它显示div 存在，但它没有填充任何地图。

在此处输入图像描述

我错过了什么？

首页.js

import React, {Component} from 'react';
import {Posts, MapNavigation} from '../containers';

class Home extends Component {
render() {
return (
<div className='container'>
Home Layout
<div className='row'>
<div className='col-md-3'>
<MapNavigation/>
</div>
<div className='col-md-6'>
<Posts/>
</div>
<div className='col-md-3'>
Account
</div>
</div>
</div>
)
}
}
export default Home

地图导航.js

import React, { Component } from 'react';
import { Map } from '../view';
class MapNavigation extends Component {
render () {
return (
<div>
MapNavigation
<div>
<Map />
</div>

</div>
)
}
}
export default MapNavigation;

地图.js

import React, {Component} from 'react';
import { withGoogleMap, GoogleMap, Marker} from 'react-google-maps';
class Map extends Component {
render() {
const GettingStartedGoogleMap = withGoogleMap( props => (
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
>

</GoogleMap>
))

return (
<GettingStartedGoogleMap
containerElement={
<div style={{height: `100%`, width: `100%`}} />
}
mapElement={
<div style={{height: `100%`, width: `100%`}} />
}
/>
)

}
}
export default Map;

Answer 1

看起来你的html样式表在100%, width:100%}}style={{height:有问题。

您可以尝试将地图样式替换为 1000 像素进行测试。

return (
<GettingStartedGoogleMap
containerElement={
<div style={{height: `1000px`, width: `1000px`}} />
}
mapElement={
<div style={{height: `1000px`, width: `1000px`}} />
}
/>
)

如果地图显示，请尝试修复您的 html 样式表