Tepki projesinde google map nasıl aktarılır

Question

Projemde webpack ve reactjs kullanıyorum ve şimdi google map api'yi entegre etmek istiyorum. İlk olarak, package.json dosyasında "react-google-maps": "^ 4.9.1" ekledim. Aşağıda bileşen sınıfım var. Benim index.html dosyasında

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> 
    ); 
    } 
} 

, ben javascripts altında ekledi. İlki goold harita api bağımlılığı. İkincisi, webpack tarafından paketlenen bundle.js'dir. Uygulamamıza eriştiğimde, google haritası görünmedi. Sanırım sorun, bileşen sınıfımdaki google map api dosyasını içe aktarmak için başarısız olacaktı. Googleapis'i içe aktarmanın doğru yolu nedir?

<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

Bunu bir yorum olarak bıraktım, ancak henüz yorumlama yetkisine sahip değilim. Bileşeni, Google Haritalar’a gönderen bir geri bildirimin parçası olarak sunmayı denediniz mi? Talebin asenkron doğasının gösterimini etkileyen şey olup olmadığını merak ediyorum. Kodunuzdaki içinde

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

:

eklemeyi düşünün Google Maps böyle

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

Ben her yerde bileşeninin yeni bir örneğini oluşturmak görmedik, ama bence siz farz .

Answer 2

İki geri aramada başarı ve hata alan ve google'un yüklenip yüklenmediğini kontrol eden bir işlev gerçekleştirdim.

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(); 
}