谷歌地圖元素只是灰色的反應應用

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;