谷歌地图元素只是灰色的反应应用

Question

我使用react-google-maps包作出反应，并出于某种原因，当它呈现它只是灰色。如果响应状态发生变化，那么它确实显得很奇怪。

我裹在重新usablility的自定义组件封装，并且代码：

import _ from 'lodash'; 
import exact from 'prop-types-exact'; 
import propTypes from 'prop-types'; 
import withScriptjs from 'react-google-maps/lib/async/withScriptjs'; 
import { GoogleMap as GMap, withGoogleMap } from 'react-google-maps'; 
import React, { Component } from 'react'; 

const apiKey = 'api_key'; 

const AsyncMap = _.flowRight(
    withScriptjs, 
    withGoogleMap, 
    )(props => (
     <GMap 
      defaultCenter={props.defaultCenter} 
      defaultZoom={props.defaultZoom} 
      onClick={props.onClick} 
      ref={props.onMapLoad} 
     > 
      {props.children} 
     </GMap> 
    )); 

class GoogleMap extends Component { 
    render() { 
     return (
      <AsyncMap 
       googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&key=${apiKey}`} 
       loadingElement={<div>{'loading...'}</div>} 
       {...this.props} 
      /> 
     ); 
    } 
} 

GoogleMap.propTypes = exact({ 
    containerElement: propTypes.object, 
    defaultCenter: propTypes.object.isRequired, 
    defaultZoom: propTypes.number, 
    mapElement: propTypes.object, 
    onClick: propTypes.func, 
}); 

GoogleMap.defaultProps = { 
    containerElement: (<div style={{ height: '250px' }} />), 
    mapElement: (<div style={{ height: '250px' }} />), 
    defaultZoom: 5, 
    onClick: _.noop, 
}; 

export default GoogleMap; 

，这就是所谓像这样：

<GoogleMap 
    containerElement={<div className={'overnight-storage-map'} style={{ height: '250px' }} />} 
    defaultCenter={storageLocation} 
    defaultZoom={3} 
> 
    <Marker 
     defaultAnimation={2} 
     key={`marker-${s.id}`} 
     position={storageLocation} 
    /> 
</GoogleMap> 

Answer 1

的问题最终是因为这是在一个没有默认扩展的手风琴中提供的。当手风琴被展开/折叠时，我只写了一个函数，在地图上调用本地resize方法。

import _ from 'lodash'; 
import exact from 'prop-types-exact'; 
import propTypes from 'prop-types'; 
import withScriptjs from 'react-google-maps/lib/async/withScriptjs'; 
import { GoogleMap as GMap, withGoogleMap } from 'react-google-maps'; 
import React, { Component } from 'react'; 

const apiKey = 'api_key'; 

const AsyncMap = _.flowRight(
    withScriptjs, 
    withGoogleMap, 
    )(props => (
     <GMap 
      defaultCenter={props.defaultCenter} 
      defaultZoom={props.defaultZoom} 
      onClick={props.onClick} 
      ref={props.onMapLoad} 
     > 
      {props.children} 
     </GMap> 
    )); 

class GoogleMap extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      dragged: false, 
     }; 

     this.dragged = this.dragged.bind(this); 
     this.onMapLoad = this.onMapLoad.bind(this); 
     this.resize = this.resize.bind(this); 
    } 

    dragged() { 
     this.setState({ dragged: true }); 
    } 

    onMapLoad(map) { 
     if (!map) return; 

     this._map = map; 
     this._mapContext = this._map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; 

     this._mapContext.addListener('drag', this.dragged); 
    } 

    resize() { 
     window.google.maps.event.trigger(this._mapContext, 'resize'); 

     if (!this.state.dragged) 
      this._mapContext.setCenter(this.props.defaultCenter); 
    } 

    render() { 
     return (
      <AsyncMap 
       googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${apiKey}`} 
       loadingElement={<div>{'loading...'}</div>} 
       onMapLoad={this.onMapLoad} 
       {...this.props} 
      /> 
     ); 
    } 
} 

GoogleMap.propTypes = exact({ 
    children: propTypes.any, 
    containerElement: propTypes.object, 
    defaultCenter: propTypes.object.isRequired, 
    defaultZoom: propTypes.number, 
    mapElement: propTypes.object, 
    onClick: propTypes.func, 
}); 

GoogleMap.defaultProps = { 
    containerElement: (<div style={{ height: '250px', width: '100%' }} />), 
    mapElement: (<div style={{ height: '250px', width: '100%' }} />), 
    defaultZoom: 5, 
    onClick: _.noop, 
}; 

export default GoogleMap;