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

问题描述 投票:0回答:1

这是我的反应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%'。没有显示在页面上。

reactjs google-map-react
1个回答
0
投票

试试这个

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。

© www.soinside.com 2019 - 2024. All rights reserved.