Google-maps-react 未加载地图答案

【问题标题】：Google-maps-react not loading mapGoogle-maps-react 未加载地图
【发布时间】：2019-06-23 15:19:36
【问题描述】：

当我尝试使用 Google 地图加载组件时（props 已按预期传递给组件），我只是收到一条消息说 "Loading map..." 但未加载带有标记的地图。控制台中也没有错误。这是组件。我在这里做错了什么？

import React, {Component} from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import { Constants } from './../../utils/constants';

export class MapContainer extends Component {

    state = {
        selectedPlace: ''
    }

    onMarkerClick = (e) => {
        this.setState({selectedPlace: e.Name});
    }

  render() {
    return (
      <Map 
        google={this.props.google}
        style={{width: '20vw', height: '45vh', 'top': '1.5rem'}}
        containerStyle={{width: '20vw', height: '30vh'}}
        initialCenter={{
          lat: this.props.lat,
          lng: this.props.lng
        }}
        zoom={15}>
        {this.props.markers.length > 0 && // Rendering multiple markers for 
          this.props.markers.map((m) => {
            return (<Marker 
                      onClick={this.onMarkerClick}
                      name={this.state.selectedPlace}
                      position={{ lat: m.Latitude, lng: m.Longitude }}
                      key={m.Name} />);
          })
        }

        {this.props.markers && // Rendering single marker for supplier details map
          <Marker onClick={this.onMarkerClick}
                name={this.state.selectedPlace} />
        }

        <InfoWindow onClose={this.onInfoWindowClose}>
              <h4>{this.state.selectedPlace}</h4>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: (Constants.GoogleMapsApiKey),
  language: "RU"
})(MapContainer)

【问题讨论】：

你能发布一个你的代码的代码框/堆栈闪电战吗？
你有一个广告拦截器吗？这些可能会干扰脚本并导致此类问题
@TarunLalwani，不，我没有任何类型的广告拦截器（但我应该）。
@MunimMunna，这里是代码框的链接（当然没有 API 密钥）codesandbox.io/s/google-maps-react-t00do
在您的 App 组件中使用地图时，请使用 App = GoogleApiWrapper 而不是 export default GoogleApiWrapper。您也可以（并且应该）将地图移动到子组件中。

标签： reactjs google-maps-react

【解决方案1】：

在您的代码和框演示中，您正在导出您的应用组件，您需要在其中呈现它。

export default GoogleApiWrapper({
  apiKey: "",
  language: "RU"
})(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在这里，您正在渲染未被GoogleApiWrapper HOC 包装的应用程序组件。与其导出打包的应用程序，不如将其呈现如下：

App = GoogleApiWrapper({
  apiKey: "",
  language: "RU"
})(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案2】：

尝试以像素为单位设置地图的宽度和高度

style={{width: '200px', height: '450px', 'top': '1.5rem'}}

【讨论】：