reactjs - 没有加载 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

为了显示您的加载道具，您必须这样做：

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 使用双花括号，希望对您有所帮助。