简介
sigungu 是一个开源的 npm 包，用于处理中国大陆地区的地址数据。它提供了全国大多数省市区的数据，支持通过行政区划代码或名称进行查询、拼装地址等常用操作。
本文将介绍 sigungu 的基本用法和常见应用场景，并提供示例代码和实际案例供参考。
安装
安装 sigungu 可以使用 npm 命令行或 yarn 命令行：
--- ------- -------
或
---- --- -------
使用
在使用 sigungu 前，需要先导入包：
----- ------- - -------------------
查询地址数据
sigungu 提供了两个查询函数：search 和 findByCode。前者可以根据省市区名称进行模糊搜索，后者可以根据行政区划代码进行精确查询。
搜索函数
search 函数的调用方式如下：
----- ------- - ---------------------
其中 query 为一个字符串，表示搜索的关键字。
search 函数返回一个数组，元素为符合条件的地址对象。每个地址对象包含以下键值：
code：行政区划代码，6 位数字。name：地名，如“广东省”、“深圳市”、“福田区”等。level：行政区划等级，1 到 3 分别表示省级、市级和区县级。parent：父级地址对象。
以下是一个示例：
----- ------- - --------------------- --------------------- -- --- -- - -- - -- ----- --------- -- ----- ------ -- ------ -- -- ------- - ----- --------- ----- ------ ------ - - -- -- -- - -- ----- --------- -- ----- ------ -- ------ -- -- ------- - ----- --------- ----- ------ ------ - - -- -- -- - -- ----- --------- -- ----- ------ -- ------ -- -- ------- - ----- --------- ----- ------ ------ - - -- -- -- --- -- -
精确查询函数
findByCode 函数用于精确查找某个行政区划代码对应的地址：
----- ------- - -------------------------
其中 code 为六位数字的行政区划代码。
返回的 address 将是一个地址对象，和 search 函数中的元素格式一样。
拼装地址
有了查询函数，我们可以借助 sigungu 来拼装完整的地址了。
以下是一个示例：
----- ---- - --------- ----- ------- - ------------------------- ----- ----------- - ---------------------------------------- ------------------------- -- ------------
示例应用：省市区联动
在前端开发中，经常需要使用省市区联动来让用户选择地址。sigungu 可以很方便地帮助我们实现这个功能。
以下是一个示例：
----- --------- - --------------------
----- ----------- - ----------------------------------------
---------------------------- -- -
----- ------ - ---------------------------------
------------ - --------------
----------- - --------------
--------------------------------
---
-------------------------------------- -- -- -
----- ------ - ----------------------------------------- ----
----- ------- - ------------------------------------
----------------- - ---
--------------------- -- -
----- ------ - ---------------------------------
------------ - ----------
----------- - ----------
----------------------------
---
---
----- ------- - ------------------------------------
---------------------------------- -- -- -
----- --------- - ------------------------------------- ----
----- ----------- - ----------------------------------------
--------------------- - ---
---------------------------- -- -
----- ------ - ---------------------------------
------------ - --------------
----------- - --------------
--------------------------------
---
---该示例会在页面上显示一个省市区的下拉框联动组合，当选择省份后，会显示该省的市级列表，当选择市后，会显示该市的区县列表。
总结
npm 包 sigungu 提供了方便的地址数据查询和拼装功能，可以帮助前端开发者在省市区联动、地址选择等场景中提高开发效率。在使用 sigungu 时，建议根据实际场景选择查询函数，并借助拼装功能尽可能简洁地实现代码逻辑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057add81e8991b448eb654