未加载带有ReactJS的谷歌地图

Question

请提供帮助。我正在尝试使用我的API KEY加载地图。问题是地图和道具都没有加载。也许我没有抓住重点。

有什么想法吗？

这是回购

这是地图容器的代码

import React, { Component } from 'react';
import {GoogleApiWrapper, Map} from 'google-maps-react';
const API_KEY = 'apikeystring';
export class Container extends Component {
render() {
const style = {
width: '200px',
height: '200px'
}
if (!this.props.loaded) {
return <div>Loading props...</div>
}
return (
<div style={style}>
<Map 
google={window.google} 
initialCenter={{
lat: 44.498955,
lng: 11.327591
}}
style={{
width: '100px',
height: '100px'
}}
/>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(Container)

我做错了什么？

Answer 1

为了展示你的Loading道具，你必须这样做：

return (
<div style={style}>
{(!this.props.loaded) ? <div>Loading props...</div> : null}
<Map 
google={window.google} 
initialCenter={
lat: 44.498955,
lng: 11.327591
}
style={{
width: '100px',
height: '100px'
}}
/>
</div>

我不确定，但我不认为你需要为initialCenter提供双层护具，希望它能有所帮助。