реагировать карты гугл аутси грид - PullRequest
Новая
       25

реагировать карты гугл аутси грид

0 голосов
/ 12 февраля 2019

Я использую Google-карты-реагировать в моем проекте.На стороне на моей странице я хотел бы разместить карту.Для разделения контента я использую Grid, и мой веб-сайт выглядит так 

  render() {
   return (    
    <Grid container spacing={8}>
      <Grid item sm={7}>Some content here</Grid>
       <Grid item sm={5}>
         <Grid container spacing={8}>
           <Grid item sm={12}> <MAPCONTAINER /> </Grid>
           <Grid item sm={12}> <OTHER_COMPONENT /> </Grid>
         </Grid>
       </Grid>
     </Grid>
   )}

, а <MAPCONTAINER /> выглядит так 

const style = {
  width: '100vw',
  weight: '100hx',
}

class MapContainer extends Component { 
  render() {
    return (
      <Map 
        google={this.props.google} 
        zoom={4}
        style = {style}
        >
      </Map>      
    );
  }
}

export default GoogleApiWrapper({
    apiKey: (GOOGLE_KEY)
  })(MapContainer)

Есть две проблемы: во-первых,карта выходит из сетки, она очень широкая, и странно то, что когда я проверяю этот элемент сетки, он показывает, что он имеет height:0, как будто внутри этой сетки нет ничего.Вторая проблема заключается в том, что <OTHER_COMPONENT /> перекрываются на карте, как будто он не может видеть, что есть какой-то другой Компонент выше.

Я не могу найти способ разместить карту в Grid, как это должно быть правильно.

Спасибо за помощь.

1 Ответ

0 голосов
/ 12 февраля 2019

Компонент Map отображает карту в <div style="position: absolute;... Так что вам нужно обернуть ее в <div style="position: relative;

Самый простой способ сделать это - добавить position: относительный;для элемента Grid, например, так: 

<Grid item sm={12} style={{position: 'relative', height: '50vh'}}><MapContainer /></Grid>

Таким образом, вам не нужно добавлять стиль к компоненту карты 

<Map 
    google={this.props.google} 
    zoom={4}>
</Map>
...