google-maps - react 谷歌地图没有出现

Question

react-google-maps 没有显示在屏幕上。我有一个 Home 组件，它正在呈现一个容器 MapNavigation 组件，该组件正在呈现 View Map 组件。基本上是 Home -> MapNavigation -> Map

我正在尝试显示一个简单的 map ，但无法正常工作。

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

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

enter image description here

我错过了什么？

首页.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

map 导航.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;

map .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%}} 方面有问题。

你可以尝试把你的 map 风格换成1000px来测试。

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

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

      />
)

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