Question

react-google-maps未在屏幕上显示。我有一个Home组件，它正在渲染一个容器MapNavigation组件，它正在渲染视图Map Component。基本上是家 - ＆gt; MapNavigation - ＆gt;图

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

我正在关注本教程 - ＆gt; https://tomchentw.github.io/react-google-maps/basics/simple-map

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

我错过了什么？

Home.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

MapNavigation.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％}}的问题。

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

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

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

      />
)

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

反应谷歌地图没有出现

1 个答案: