【推荐】地址选择器实现集合 👍👍

[modood]

在各个社区发现许多朋友基于本项目数据实现了功能完善的地址选择器，因此分享在这里，希望可以帮助到需要的人，也希望从中收益的人可以多支持支持他们 👏 如有遗漏，欢迎补充～

• vue实现全国省市下拉联动菜单，适用于收货地址_兰亭古墨-CSDN博客
• vue2移动端仿淘宝APP省市区街道四级地区选择器_绳墨BigHead-CSDN博客
• Vue实现省市区级联选择器，使用Elementui的Cascader级联选择器获取label值_风如也的博客-CSDN博客
• 小程序开发--地区选择四级联动（选择省,市,县,镇）_wangzai888的博客-CSDN博客
• Kotlin-使用Android-PickerView实现地址三级联动选择器_zylvip的博客-CSDN博客
• Kotlin-Android实现地址四级联动选择器
• 仿淘宝，京东多级地址选择器 - 简书
• 基于mint-ui的城市选择3级联动 - 简书
• Mint-UI中Popup+Picker实现城市三级级联 - 简书
• JFCitySelector轻量、灵活、可自定义的三级城市选择器 - 简书
• ReactNative 省市县镇地址选择联动的简单封装 - 简书
• VUE 智能识别收货地址（支持省市区县街道/姓名/电话/邮编/身份证号码识别）
• 【mint-ui】的Picker和Popup组件去创建一个地址选择器
• 市区数据采集并标注拼音、坐标和边界范围
• TODO 补充更多......

[lilien1010]

非常棒！

[bigrotor187]

我看这个都是前端来维护，那如果是后端来维护的话，提供接口给前端的方式，那返回的响应 json 应该要怎么样的呢？

[modood]

我看这个都是前端来维护，那如果是后端来维护的话，提供接口给前端的方式，那返回的响应 json 应该要怎么样的呢？

@bigrotor187 服务端维护的话就是把数据存到数据库里，然后提供 http api 根据上层 code 查下层的列表就可以了，例如：根据城市查区县列表

[bigrotor187]

我看这个都是前端来维护，那如果是后端来维护的话，提供接口给前端的方式，那返回的响应 json 应该要怎么样的呢？

@bigrotor187 服务端维护的话就是把数据存到数据库里，然后提供 http api 根据上层 code 查下层的列表就可以了，例如：根据城市查区县列表

cool，这里的省、市编码分别是 2 位、4 位，但我看民政部都是 6 位的，请问您是通过什么方法爬取整理成 2 位、4 位弄到数据库中的呢？

[MoonRiser]

• Kotlin-Android实现地址四级联动选择器

[modood]

• Kotlin-Android实现地址四级联动选择器

@MoonRiser 你好，只添加新增的链接即可，我补充到最上面的列表里

[buyixjh]

好人一生平安

[lihanspace]

可以加个邮编吗

[hgx]

求 Ant Design of Angular - Cascader 版本

[waiyuchan]

import React from "react";
import ReactDOM from "react-dom";
import {Cascader} from "antd";

import areas from "china-division/dist/areas.json";
import cities from "china-division/dist/cities.json";
import provinces from "china-division/dist/provinces.json";

// 定义接口
interface Area {
    code: string;
    name: string;
    cityCode?: string;
}

interface City {
    code: string;
    name: string;
    provinceCode: string;
    children?: AreaOption[];
}

interface Province {
    code: string;
    name: string;
    children?: CityOption[];
}

interface AreaOption {
    label: string;
    value: string;
}

interface CityOption extends AreaOption {
    children?: AreaOption[];
}

// 将原始数据转换为带有 children 属性的类型
const typedCities: City[] = cities.map((city) => ({...city, children: []}));
const typedProvinces: Province[] = provinces.map((province) => ({
    ...province,
    children: []
}));
const typedAreas: Area[] = areas.map((area) => ({...area}));

typedAreas.forEach((area) => {
    const matchCity = typedCities.find((city) => city.code === area.cityCode);
    if (matchCity) {
        matchCity.children!.push({
            label: area.name,
            value: area.code
        });
    }
});

typedCities.forEach((city) => {
    const matchProvince = typedProvinces.find(
        (province) => province.code === city.provinceCode
    );
    if (matchProvince) {
        matchProvince.children!.push({
            label: city.name,
            value: city.code,
            children: city.children
        });
    }
});

const options = typedProvinces.map((province) => ({
    label: province.name,
    value: province.code,
    children: province.children
}));

ReactDOM.render(
    <div style={{margin: 24}}>
        <p style={{marginBottom: 24}}>Antd Cascader Demo</p>
        <Cascader
            options={options}
            showSearch
            placeholder="请选择地址"
            style={{width: 400}}
        />
    </div>,
    document.getElementById("root")
);