Google 将自动完成放在反应组件中

Question

我正在尝试构建一个 google 地图组件，使用 Google 地图 API v3 一切正常，但不支持自动完成功能。

这是我使用的代码：

Google地图组件

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

我弄明白了，而且是很简单的问题。

问题是我没有 "enable" 我的 google 开发者控制台中的 API 地方。

完成后一切正常！！

Answer 2

我花了很长时间才让 google-places-autocomplete 功能与 React 组件配合得很好。然而，我确实设法弄明白了，并在这里写了一个简短的教程。

Medium Tutorial Post!

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

Google 将自动完成放在反应组件中

Google places autocomplete inside a react component

google-maps

autocomplete

google-maps-api-3

google-places-api

reactjs