React Google Places 自动完成示例 - JavaScript

本文介绍如何使用 React 和 Google Places API 实现自动完成搜索功能。您将学习如何：

• 从 Google Places API 获取地点预测数据
• 使用 React 和 axios 将获取的预测数据传递到组件
• 呈现地点预测数据并允许选择

步骤 1：创建 Google API 密钥

要使用 Google Places API，您需要创建一个具有适当权限的 Google API 密钥。确保启用以下 API：

• Geocoding API
• Places API

将创建的 API 密钥复制到以下代码中：

const googleApiKey = 'YOUR_GOOGLE_API_KEY';

步骤 2：安装所需的依赖项

使用以下命令安装 axios 和 react-google-places-autocomplete :

npm install axios react-google-places-autocomplete

步骤 3：创建 Search 组件

按照以下方式创建 Search 组件：

import React, { useState } from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
import axios from 'axios';

const Search = () => {
  const [predictions, setPredictions] = useState([]);
  const [loading, setLoading] = useState(false);

  const onPlaceSelected = async (place) => {
    setLoading(true);
    try {
      const response = await axios.get(
        `https://maps.googleapis.com/maps/api/geocode/json?place_id=${place.place_id}&key=${googleApiKey}`
      );
      console.log(response.data.results[0]);
    } catch (error) {
      console.error(error);
    }
    setLoading(false);
  };

  return (
    <GooglePlacesAutocomplete
      apiKey={googleApiKey} 
      selectProps={{
        predictions,
        loading,
        onPlaceSelected,
      }}
      autocompletionRequest={{
        types: ['(cities)'],
      }}
      debounce={500}
      renderSuggestions={(active, suggestions, onSelectSuggestion) => {
        if (active) {
          setPredictions(suggestions);
        }
        return null;
      }}
    />
  );
};

export default Search;

在此组件中，我们使用 GooglePlacesAutocomplete 组件呈现 Google 地点搜索框。我们将 Google API 密钥和 autocompletionRequest 属性传递到组件，以定义搜索条件和选项。

此组件还使用了 react-google-places-autocomplete 提供的 renderSuggestions 回调来获取和设置地点预测数据。当输入值更改时，renderSuggestions 回调将被触发，并将预测数据作为参数传递。

当用户选择地点时，我们将使用 onPlaceSelected 回调发出请求，从而获取有关所选地点的详细位置信息。

步骤 4：将搜索组件集成到应用中

将 Search 组件集成到您的应用中，并按照您的需要进行定制。例如，您可以将预测数据呈现为一个下拉列表，从而允许用户选择一个地点。

以下是 Search 组件的用法示例：

import React from 'react';
import Search from './Search';

const App = () => {
  return (
    <div>
      <h1>React Google Places 自动完成示例</h1>
      <Search />
    </div>
  );
}

export default App;

结论

使用 Google Places API 和 React，您可以轻松地实现自动完成搜索功能，并为用户提供一个良好的搜索体验。希望此示例能够帮助您构建出色的应用程序。