Google haritalar reaksiyon

Question

Bizim app google haritalar gömülü olması için başarısız denedim. Otomatik tamamlama alanı bir sorun olmadı, ancak haritayı aynı şekilde yerleştirmeye çalıştık ve bir şeyler ters gitti.

Tepki 0.12'yi kullanıyoruz ve otomatik tamamlama alanı için bir bileşen oluşturuyoruz.

var Geocomplete = React.createClass({ 
    componentDidMount: function() { 
     var inputOptions = {componentRestrictions: {country: 'it'}}; 

     new google.maps.places.Autocomplete(
      document.getElementById('searchTextField'), 
      inputOptions); 

    }, 
    buttonClick: function() { 
     alert(this.refs.searchField.getDOMNode().value); 
    }, 

    //   <div id="map-canvas"></div> 
    render: function() { 
     return (
      <div> 
       <label htmlFor="searchTextField"> 
       Please Insert an address: 
       </label> 
       <br/> 
       <input ref='searchField' id="searchTextField" type="text" size="50"/> 
       <br/> 
       <button onClick={this.buttonClick}>Submit</button> 
       <br /> 
      </div> 
      ); 
    } 
}); 


module.exports = Geocomplete; 

Answer 1

bu kodla deneyin:

bileşen:

<GoogleMap mlat="55.0000" mlong="-113.0000"/> 

css:

.map-gic { 
    height: 300px; 
    width: 100%; 
} 

sonra

var GoogleMap = React.createClass({ 
    getDefaultProps: function() { 
     return { 
      initialZoom: 6, 
      mapCenterLat: 53.5333, 
      mapCenterLng: -113.4073126 
     }; 
    }, 
    componentDidMount: function (rootNode) { 
     var mapOptions = { 
       center: this.mapCenterLatLng(), 
       zoom: this.props.initialZoom 
      }, 
      map = new google.maps.Map(this.getDOMNode(), mapOptions); 
     var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map}); 
     this.setState({map: map}); 
    }, 
    mapCenterLatLng: function() { 
     var props = this.props; 

     return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng); 
    }, 
    render: function() { 

     return (
      <div className='map-gic'></div> 
      ); 
    } 
}); 

module.exports = GoogleMap; 

bir sayfada göstermek için

bu, benim için

Answer 2

Ben daha kolay uygulamalar buluyorum. Bunu denetleyin: https://github.com/BrodaNoel/devseverywhere/blob/master/src/pages/AnalyticsPage/AnalyticsPage.jsx#L227 google-map-react npm paketini kullanıyor.