Google将自动完成功能置于反应组件中

Question

我正在尝试构建一个谷歌地图组件，一切都与谷歌地图API v3，但不是自动完成功能。

这是我正在使用的代码：

Google Map组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

const Marker = React.createClass({
    componentDidMount: function() {
        console.log("Marker on mount");
    },
    render: function() {
        return false;
    }
});

export default Marker;

const GoogleMap = React.createClass({
    componentDidMount: function() {
        var mapOptions = {
            center: this.createLatLng(this.props.center),
            zoom: this.props.zoom || 14
        };

        var map = new google.maps.Map(ReactDOM.findDOMNode(this), mapOptions);

        //Render all the markers (children of this component)
        React.Children.map(this.props.children, (child) => {
                var markerOptions = {
                position: this.createLatLng(child.props.position),
                title: child.props.title || "",
                animation: google.maps.Animation.DROP,
                icon: child.props.icon || null,
                map: map,
                autocomplete:new google.maps.places.AutocompleteService()
            };

            var marker = new google.maps.Marker(markerOptions);

            if(child.props.info) {
                var infowindow = new google.maps.InfoWindow({
                    content: child.props.info
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
            }
        });

        var input = this.refs.search;
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        this.setState({map});
    },
    createLatLng: function(element) {
        return new google.maps.LatLng(element.lat, element.lng);
    },
    render: function() {
        return (
            <div className="map">
                <input ref="search"/>
            </div>
        )
    }
});

export default GoogleMap;

这就是我称之为组件的地方

import React, {Component} from 'react';
import GoogleMap from './GoogleMap';
import Marker from './GoogleMap';
import Geosuggest from 'react-geosuggest';

class DoodlesMap extends Component {
    state = {
        center: null,
        marker: null,
        directions: null
    };

    componentWillMount() {
        navigator.geolocation.getCurrentPosition((position) => {
            this.setState({
                center: {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                },
                marker: {
                    position: {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    }
                }
            });


        });
    }

    renderYouAreHereMarker() {
        return (
            <Marker
                position={this.state.center}
                icon="../../img/you-are-here.png"
            />
        )
    }

    render() {
        if (!this.state.center) {
            return (
                <div>Loading...</div>
            )
        }

        return (
            <div>
                <GoogleMap
                    center={this.state.center}
                    zoom={15}
                >
                    {this.renderYouAreHereMarker()}
                    <Marker
                        position={{lat: 41.317334, lng: -72.922989}}
                        icon="../../img/marker.png"
                        info="Hola"
                    />
                    <Marker
                        position={{lat: 41.309848, lng: -72.938234}}
                        icon="../../img/marker.png"
                        info="Epi"
                    />
                </GoogleMap>
            </div>
        );
    }
}

export default DoodlesMap;

我没有收到任何控制台错误。地图也正确显示（标记为子项）输入，但不会自动完成。

先感谢您！！

Answer 1

我弄清楚了，问题非常简单。

问题是我没有在google开发者控制台中“启用”places API。

一旦我这样做，一切正常！

Answer 2

我花了很长时间才能让google-places-autocomplete功能与React Component很好地配合使用。然而，我确实设法解决了问题并在此处写了一个简短的教程。

Medium Tutorial Post!

TL;教程的DR：在组件安装完成后，你必须使用一个名为react-scripts的库来渲染google-maps-places库。大多数情况下自动完成功能不起作用的原因是库未正确加载。