Question

这是我的react Map组件。

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％'。页面上没有任何显示。

Answer 1

尝试一下

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>

My map doesn't appear!

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

Google Map返回空元素_ react

1 个答案: