Google 地图反应

Question

我们尝试将 google 地图嵌入到我们的应用程序中，但未成功。自动完成字段没有问题，但我们尝试以相同的方式插入地图，但出了点问题。

我们使用 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%;
}

这对我有用

Answer 2

我发现了更简单的实现。检查这个：https://github.com/BrodaNoel/devseverywhere/blob/master/src/pages/AnalyticsPage/AnalyticsPage.jsx#L227 它使用 google-map-react npm 包。

Google 地图反应

Google maps in react

javascript

google-maps

reactjs