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

modood commented 4 years ago

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

lilien1010 commented 4 years ago

非常棒！

bigrotor187 commented 4 years ago

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

modood commented 4 years ago

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

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

bigrotor187 commented 4 years ago

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

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

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

MoonRiser commented 3 years ago

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

modood commented 3 years ago

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

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

buyixjh commented 3 years ago

好人一生平安

lihanspace commented 2 years ago

可以加个邮编吗

hgx commented 2 years ago

求 Ant Design of Angular - Cascader 版本

waiyuchan commented 10 months ago

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")
);

modood / Administrative-divisions-of-China

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