反応プロジェクトでGoogleマップをインポートするには

Question

私はプロジェクトでwebpackとreactjsを使用していますが、今はGoogleマップAPIを統合したいと思います。最初に私のpackage.jsonファイルに "react-google-maps"： "^ 4.9.1"を追加しました。以下は私のコンポーネントクラスです。

import React, {PropTypes, Component} from 'react'; 

import { GoogleMap, Marker, SearchBox } from "react-google-maps"; 
import shouldPureComponentUpdate from 'react-pure-render/function'; 

const greatPlaceStyle = { 
    // initially any map object has left top corner at lat lng coordinates 
    // it's on you to set object origin to 0,0 coordinates 
    position: 'absolute', 
    width: 512, 
    height: 512, 
    left: 512/2, 
    top: 512/2, 

    border: '5px solid #f44336', 
    borderRadius: 512, 
    backgroundColor: 'white', 
    textAlign: 'center', 
    color: '#3f51b5', 
    fontSize: 16, 
    fontWeight: 'bold', 
    padding: 4 
}; 

export default class SimpleMapPage extends Component { 
    static defaultProps = { 
    center: {lat: 59.938043, lng: 30.337157}, 
    zoom: 1, 
    greatPlaceCoords: {lat: 59.724465, lng: 30.080121} 
    }; 

    shouldComponentUpdate = shouldPureComponentUpdate; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <GoogleMap> 

     defaultCenter={this.props.center} 
     defaultZoom={this.props.zoom}> 

     <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /> 
     <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /> 

     </GoogleMap> 
    ); 
    } 
} 

export default class MyGreatPlace extends Component { 
    static propTypes = { 
    text: PropTypes.string 
    }; 

    static defaultProps = {}; 

    //shouldComponentUpdate = shouldPureComponentUpdate; 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div style={greatPlaceStyle}> 
      {this.props.text} 
     </div> 
    ); 
    } 
} 

私のindex.htmlファイルに、私は以下のjavascriptを追加しました。最初のものはgoold map apiの依存関係です。 2番目はwebpackによってパッケージ化されたbundle.jsです。アプリケーションにアクセスすると、Googleマップが表示されませんでした。私は問題が私のコンポーネントクラスにGoogleマップのAPIをインポートするに失敗すると思う。 googleapisをインポートする正しい方法は何ですか？

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2sDQZ-36NLlY4iMvoiuQ7mS1n-v8iq2M" async defer></script> 
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script> 

Answer 1

私はこれをコメントとして残しましたが、まだコメント力はありません。 Google Mapsへのリクエストからコールバックの一部としてコンポーネントをレンダリングしようとしましたか？私は、リクエストの非同期性がディスプレイに影響を与えるかどうか疑問に思っています。私はあなたがどこかのコンポーネントの新しいインスタンスを作成して表示されませんでしたが、私はあなたがやったことを想定

let initMap =() => { 
    ReactDOM.render(
    <SimpleMapPage />, 
    document.getElementById('...') 
); 
} 

：あなたのコード内で

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    async defer></script> 

：

は次のようにGoogleマップなど、考えてみましょう。

Answer 2

2つのコールバック成功とエラーを受け取り、googleがロードされているかどうかをチェックする関数を実装しました。私がリンクすることができますどのように

initialize() { 
    this.api = L.map(this.map); 
    this.markers = L.featureGroup(); 

    this.api.addLayer(this.markers); 

    loadGoogleMapApi(() => { 
    this.api.addLayer(new L.Google('ROADMAP')); 
    }); 
} 

componentDidMount() { 
    this.initialize(); 
    this.draw(); 
}