React Google Map Marker Not cenetered

Question

我正在尝试使地图居中到defaultMarker。然而，当地图完成加载时，视图略高于默认标记。我必须向下滚动到中间才能看到defaultMarker。你知道如何在地图加载时将视图居中吗？我使用的是React、redux和react-google-map。

import React, {Component} from 'react';
import {withGoogleMap, GoogleMap, Marker} from "react-google-maps";
import {connect} from 'react-redux';

class VenuesMap extends Component {

  render() {

        let markers;
        if (this.props.venues !== null) {
            markers = this.props.venues.map((venue, i) => {
                return (
                    <Marker
                        key={i}
                        position={{ lat: venue.location.lat, lng: venue.location.lng}}
                    />
                )
            })
        } else {
            markers = <Marker position={{ lat: 40.7589, lng:-73.9851}}/>
        }
const MapWithAMarker = withGoogleMap(props =>
  <GoogleMap
        defaultCenter={{ lat: 40.7589, lng: -73.9851 }}
        center={{ lat: 40.7589, lng: -73.9851 }}
        zoom={15}
  >
    {markers}
  </GoogleMap>
);
        const googleMap =   <MapWithAMarker
            containerElement={<div style={{
                                height: `410vh`
            }} />}
            mapElement={<div style={{ height: `410vh`
             }} />}
        />
    return (
            <div>
                {googleMap}
            </div>
        )
  }
}

const stateToProps = (state) => {
  return {venues: state.venue.venues}
}

export default connect(stateToProps)(VenuesMap)

​

​

Answer 1

最大窗口高度为100vh。

只需尝试height: 100vh或更低版本即可。