谷歌将自动完成功能放在反应组件中

Posted 2023-02-23

【中文标题】谷歌将自动完成功能放在反应组件中

【英文标题】：Google places autocomplete inside a react component

【发布时间】：2016-10-28 16:22:33

【问题描述】：

我正在尝试构建一个谷歌地图组件，并且在谷歌地图 API v3 上一切正常，但在自动完成功能上却不行。

这是我正在使用的代码：

谷歌地图组件

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;

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

提前谢谢你！！

【问题讨论】：

我也需要这方面的帮助。

你有想过这个吗？

new.google.maps...中的google变量从何而来？

【参考方案1】：

我想通了，而且是很简单的问题。

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

一旦我这样做了，一切都很好！

【参考方案2】：

我花了很长时间才让 google-places-autocomplete 功能与 React 组件完美配合。但是，我确实设法弄清楚了，并在这里写了一个简短的教程。

Medium Tutorial Post!

TL；教程博士： 您必须使用名为 react-scripts 的库在组件安装后呈现 google-maps-places 库。大多数情况下，自动完成功能不起作用的原因是库没有正确加载。