谷歌地图元素只是灰色的反应应用
问题描述:
我使用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>
答
的问题最终是因为这是在一个没有默认扩展的手风琴中提供的。当手风琴被展开/折叠时,我只写了一个函数,在地图上调用本地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;
我可能是错的,但我记得有些地方需要为容器元素和/或地图元素提供背景颜色。 – pingo
可能还需要为'containerElement'提供一个'width'值 – pingo
我试着给容器和地图元素的宽度,也改变所有的宽度和高度像素值和没有百分比值,并出现相同的错误。我也试过背景色的东西,没有改变。 –