反应谷歌地图不出现

问题描述：

react-google-maps不显示在屏幕上。我有一个家庭组件正在渲染呈现视图地图组件的容器MapNavigation组件。基本上是首页 - >地图导航 - >地图反应谷歌地图不出现

我想获得一个简单的地图显示，但不工作。

我下面这个教程 - >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;

是否有在控制台的任何错误？ – jsalonen

控制台中没有错误。 –

你可以展开其他div吗？它应该包含谷歌地图元素。 – jsalonen

答

它看起来像你的html样式有style={{height: 100％, width: 100％的问题}}。

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

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

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

     /> 
)

如果地图显示，尝试解决您的html样式表

反应谷歌地图不出现

相关推荐