反应谷歌地图不出现

Question

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

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

我正在关注本教程 - > 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 样式表有style={{height:100% , width:100%的问题}}。

您可以尝试将您的地图样式替换为1000px来测试。

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

      mapElement={
        <div style={{height: `1000px`, width: `1000px`}} />
      }

      />
)

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