Question

我正在使用React.JS，在搜索框中输入3个字符后，我需要调用google-place-api自动完成功能。他们在文档中有抵消，但是不起作用。这是我的代码：

renderAutoComplete() {
    let attr = this;
    const { google, map } = this.props;
    var autocompleParam = {
        offset: 4
    }
    const aref = this.refs.autocomplete;
    const node = ReactDOM.findDOMNode(aref);
    var start_location = document.getElementById('start_location')
    var from_address = new google.maps.places.Autocomplete(
        start_location, autocompleParam, {
    });
    from_address.setComponentRestrictions({ 'country': ['uk'] });

    google.maps.event.addListener(from_address, 'place_changed', function (e) {
        document.getElementById('start_location').style.borderColor = '';
        var place = from_address.getPlace();
        attr.props.onChangeLocationSearch(place.place_id);
        attr.props.onGetLocationInfo(e);
    });

    var to_address = new google.maps.places.Autocomplete(
        (document.getElementById('end_location')), {
    });

    to_address.setComponentRestrictions({ 'country': ['uk'] });

    google.maps.event.addListener(to_address, 'place_changed', function (e) {
        var place = to_address.getPlace();
        document.getElementById('end_location').style.borderColor = '';
        attr.props.onChangeEndLocationSearch(place.place_id);
        attr.props.onReturnLocation(e);
    });
}

Answer 1

您可以尝试获取“ to_address”值的长度，然后允许进行.getPlace（）调用。像这样：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#ffffff"
    tools:context=".Home">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appBar"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            app:layout_scrollFlags="scroll|enterAlways"
            android:id="@+id/toolbar"
            android:background="#ffffff">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="23dp"
                    android:layout_centerVertical="true"
                    android:contentDescription="@null"
                    android:src="@drawable/logo"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:text="@string/tortube"
                    android:id="@+id/heading"
                    android:textStyle="bold"
                    android:layout_marginStart="45dp"
                    android:textSize="25sp"
                    android:textColor="#000000"/>
            </RelativeLayout>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.SwipeRefreshLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/swipe">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:id="@+id/progressbar"/>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="0dp"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </RelativeLayout>
    </android.support.v4.widget.SwipeRefreshLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"
        android:id="@+id/withoutInternet">

        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerInParent="true"
            android:contentDescription="@null"
            android:id="@+id/image"
            android:src="@drawable/internet_check"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:text="@string/you_re_offline"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="25sp"/>
    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

输入3个字符后google-place-api自动完成

1 个答案: