Question

请帮助。我正在尝试使用我的API KEY加载地图。问题在于地图和道具均未加载。可能我错过了重点。

有什么想法吗？

这里是repo

这是地图容器的代码

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

无法加载带有ReactJS的Google Maps

1 个答案: