npm 包 react-geosuggest-updated 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

react-geosuggest-updated 是一个 React 简化地址输入的组件，它使用了 Google 地址自动完成 API。通过该组件，用户可以输入地址并获取地址的相关坐标以及其他信息，开发者可以轻松地将该组件集成到自己的 React 项目中。

安装

要使用 react-geosuggest-updated 组件，首先需要安装该组件的 npm 包。可以通过以下命令进行安装：

npm install react-geosuggest-updated

使用方法

引入 react-geosuggest-updated 组件：

import Geosuggest from 'react-geosuggest-updated';

在 React 组件中使用：

-- -------------------- ---- -------
----- ----------- ------- --------------- -
  ------------- -
    --------
    ---------- - -
      --------- ---
      ------------ - ---- ----- ---- ---- -
    --
    -------------------- - --------------------------------
  -

  ------------------------ -
    ---------------
      --------- --------------------
      ------------ ----------------
    ---
  -

  -------- -
    ------ -
      -----------
        ------------------ ---------
        --------------------------------------
      --
    --
  -
-

参数

react-geosuggest-updated 组件支持以下参数：

types：Array，筛选地址建议的类型，默认值：['(cities)']，详细信息可以在这里查看
bounds：Object，限制地址建议的边界，默认值：null
country：String，筛选地址建议的国家，默认值：null 表示不筛选
highlightMatch：Boolean，是否在建议里高亮匹配的文本，默认值：false
autoActivateFirstSuggest：Boolean，是否自动选择第一个建议，默认值：false
queryDelay：Number，延迟查询地址建议的时间（毫秒），默认值：100
minLength：Number，激活建议的最小输入字符数，默认值：1
placeholder：String，输入框的提示信息，默认值：Enter location
disabled：Boolean，是否禁止输入框，默认值：false
inputClassName：String，添加到输入框的 CSS 类名称，默认值：geosuggest__input
suggestsClassName：String，添加到建议框的 CSS 类名称，默认值：geosuggest__suggests
suggestItemClassName：String，添加到建议项的 CSS 类名称，默认值：geosuggest__item
suggestItemActiveClassName：String，添加到选中建议项的 CSS 类名称，默认值：geosuggest__item--active
onActivateSuggest：Function，选中建议项时的回调函数，默认值：() => {}
onSuggestNoResults：Function，未找到任何地址建议时的回调函数，默认值：() => {}
onSuggestSelect：Function，选中地址建议时的回调函数，默认值：() => {}
location：String，默认地址建议 (<input>value)，默认值：''
radius：Number，限制地址建议的半径（英里），默认值：null
geocodeProvider：Function，接收一个地址字符串，返回 Promise，数据格式为 {lat, lng, location}

示例

完整示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------------------

----- ----------- ------- --------------- -
  ------------- -
    --------
    ---------- - -
      --------- ---
      ------------ - ---- ----- ---- ---- -
    --
    -------------------- - --------------------------------
  -

  ------------------------ -
    ---------------
      --------- --------------------
      ------------ ----------------
    ---
  -

  -------- -
    ------ -
      -----
        -----------
          ------------------ ---------
          --------------------------------------
        --
        -------------- ---------------------------
        ----------------- ----------------------------------------------
      ------
    --
  -
-

总结

react-geosuggest-updated 组件是一个方便开发者集成到其 React 项目中的地址输入组件。该组件使用了 Google 地址自动完成 API，使得用户输入地址时可以获取到地址的相关信息。本文主要介绍了该组件的安装、使用、参数以及示例代码。希望本文对读者在使用 react-geosuggest-updated 组件进行前端开发时提供了一些帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055db681e8991b448db747