时间戳

首页 > 解决方案 > 反应谷歌地图返回空元素_反应

reactjs - 反应谷歌地图返回空元素_反应

问题描述

这是我的反应地图组件。

import GoogleMapReact from 'google-map-react';


this.state = {
            center: {
                lat: 59.95,
                lng: 30.33
            },

        }
<div  style={{ height: '100vh', width: '100%', position:"absolute" }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "some token" }}
                    defaultCenter={this.props.center}
                    defaultZoom={16}
                >  
                </GoogleMapReact>
            </div>

但没有任何渲染。为什么？在github页面文档中，他们说parrent元素必须有一个绝对位置'100vh'，宽度：'100％'。什么都没有显示在页面上。

标签： reactjsgoogle-map-react

解决方案

尝试这个

import GoogleMapReact from 'google-map-react'

const SomeText = ({ text }) => <div>{ text }</div>;

<div className='google-map' style={{width:'100%',height:'400px',margin:'auto'}}>
    <GoogleMapReact defaultCenter={ this.props.center } defaultZoom={16}>
        <SomeText lat={ this.props.center.lat } lng={ this.props.center.lng } text={ 'Here you are?' } />
    </GoogleMapReact>
</div>

我的地图没有出现！

确保容器元素具有宽度和高度。地图将尝试填充父容器，但如果容器没有大小，地图将折叠到 0 宽度/高度。这不是 google-map-react 的要求，它通常是 google-maps 的要求。

推荐阅读