谷歌地图反应

Question

我们尝试在我们的应用中嵌入谷歌地图失败了.自动完成字段不是问题,但我们试图以相同的方式插入地图,出现问题.

我们使用react 0.12并为自动完成字段创建一个组件.

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

尝试使用此代码:

零件:

    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;

然后在页面中显示它:

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

CSS:

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

这对我有用