介绍
Material-UI-Geosuggest 是一个 React 组件，可以快速地在你的应用程序中集成智能地址搜索功能。它使用了 Google 地图 API 和 material-ui 及其组件设计，所以它还具有美观性和易用性。
安装
使用 npm 进行安装
npm install material-ui-geosuggest
使用
首先，你需要将 Material-UI Geosuggest 导入你的 React 组件中。
import Geosuggest from 'material-ui-geosuggest';
然后，你可以在你的组件中使用 Geosuggest 组件。
<Geosuggest onSuggestSelect={geocode} />在上面的示例中， onSuggestSelect 是一个回调函数，用于处理当用户选择一个建议时的事件。
属性
Geosuggest 组件有几个可用的属性：
inputProps
使用 inputProps 可以覆盖 input 组件的一些属性，比如占位符，自动完成等等。
<Geosuggest
inputProps={{
placeholder: '输入地址',
autoComplete: 'off',
}}
/>types
使用 types 属性可以筛选搜索到的地址的类型。例如，如果你只想搜索到商店，你可以这样做：
<Geosuggest types={['establishment']} />这将仅返回用于商店的地址。
location
使用 location 属性可以指定从何处开始搜索。默认情况下，搜索将从当前位置开始。
<Geosuggest location={{ lat: 41.9, lng: 12.5 }} />radius
使用 radius 属性可以指定搜索的半径范围。
<Geosuggest radius={20} />这将在搜索中添加一个 20 公里的半径。
onSuggestSelect
onSuggestSelect 是 Geosuggest 最重要的属性，因为它是用于处理所选地址的事件。 onSuggestSelect 应该是一个回调函数，它将接收单个参数，该参数是所选地址的详细信息。
详细的示例如下：
function geocode(suggest) {
console.log(suggest);
}
<Geosuggest onSuggestSelect={geocode} />在上面的例子中， geocode 回调函数会在选择建议时打印建议对象。
fetch
如果你想使用自己的地图 API，你可以使用 fetch 属性将其传递给 Geosuggest。 fetch 应该是一个异步函数，它将接收单个参数，即 URL，应该返回搜索结果的数组。
async function myFetch(url) {
const res = await fetch(url);
const json = await res.json();
return json.results;
}
<Geosuggest fetch={myFetch} />这将使用你的 myFetch 函数进行搜索。
完整示例
下面是一个完整的示例，展示了如何设置不同的选项和处理选定的建议：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -------------------------
------ ------- ----- -------------- ------- --------------- -
---------------- -
---------------------
-
-------- -
------ -
-----------
-------------
------------ -------
------------- ------
--
-------------------------
----------- ---- ----- ---- ---- --
-----------
------------------------------
---------------
--
--
-
-
----- -------- ------------ -
----- --- - ----- -----------
----- ---- - ----- -----------
------ -------------
-这将设置 geocoding 成功后的回调函数，并使用 inputProps 设置文本框占位符，并使用 types 来仅显示商铺。
结论
Material-UI-Geosuggest 是一个非常强大且易于使用的地址搜索工具，能够为你的应用程序提供更好的用户体验。使用本文提供的代码，你可以很容易地将其集成到你的 React 应用程序中，希望它对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005567d81e8991b448d34b5