google-maps - Google 将自动完成功能放置在 React 组件中

Question

我正在尝试构建一个 Google map 组件，使用 Google Maps 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;

我没有收到任何控制台错误。 map 也能正确显示输入(将标记作为子项)，但不会自动完成。

提前谢谢您!!

Answer 1

我明白了，这是一个非常简单的问题。

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

一旦我这样做了，一切就正常了!!