您的位置:

大陆省市区三级联动数据库 - 详细地址选择

一、概述

大陆省市区三级联动数据库是一个存储了中国大陆所有省市区数据以及详细地址信息的数据库。

详细地址选择是指在表单中选择地址时,能够通过省市区三级联动方式展现出所有可选地址选项,同时在最后一个选项中提供输入框,用于输入详细地址。

可以通过使用该数据库和详细地址选择组件,快速便捷地完成地址选择功能的开发。

二、数据库设计

数据库中包含了三张表:省表、市表和区表。每张表中都有一个id和一个name字段。其中,市表和区表都有一个pid字段,作为父级省市的id。

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `pid` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `area` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `pid` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

三、数据填充

可以通过爬取国家统计局的数据,或者直接使用开源数据,来填充省市区数据。

以使用开源数据为例,以下是导入数据的代码示例:

LOAD DATA LOCAL INFILE '/path/to/province.csv' INTO TABLE province CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';
LOAD DATA LOCAL INFILE '/path/to/city.csv' INTO TABLE city CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';
LOAD DATA LOCAL INFILE '/path/to/area.csv' INTO TABLE area CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';

其中,/path/to/province.csv、/path/to/city.csv和/path/to/area.csv分别是包含省市区数据的CSV文件路径。

四、详细地址选择组件

详细地址选择组件是一个基于省市区三级联动选择器的表单组件,其中最后一个选项为详细地址输入框。

以下是详细地址选择组件的代码示例:

<div class="address-selector">
  <select name="province">
    <option value="">省份</option>
    <?php foreach ($provinceList as $province): ?>
      <option value="<?php echo $province['id']; ?>"><?php echo $province['name']; ?></option>
    <?php endforeach; ?>
  </select>
  <select name="city"></select>
  <select name="area"></select>
  <input type="text" name="detail" placeholder="详细地址"/>
</div>

<script>
$(function() {
  // 省市区联动选择器
  $('select[name="province"]').change(function() {
    var pid = $(this).val();
    if (pid == '') {
      $('select[name="city"]').html('<option value="">城市</option>');
      $('select[name="area"]').html('<option value="">区县</option>');
      return;
    }
    
    $.get('/api/city', {pid: pid}, function(data) {
      var options = '<option value="">城市</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('select[name="city"]').html(options);
      $('select[name="area"]').html('<option value="">区县</option>');
    });
  });
  
  $('select[name="city"]').change(function() {
    var pid = $(this).val();
    if (pid == '') {
      $('select[name="area"]').html('<option value="">区县</option>');
      return;
    }
    
    $.get('/api/area', {pid: pid}, function(data) {
      var options = '<option value="">区县</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('select[name="area"]').html(options);
    });
  });
});
</script>

该组件依赖jQuery。

五、地址数据接口

为了使详细地址选择组件能够动态获取省、市、区数据,需要提供地址数据接口。

以下是简单的地址数据接口代码示例:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', 'password');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  switch ($_GET['action']) {
    case 'city':
      $stmt = $pdo->prepare('SELECT * FROM city WHERE pid = ?');
      $stmt->execute([$_GET['pid']]);
      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
      break;
    case 'area':
      $stmt = $pdo->prepare('SELECT * FROM area WHERE pid = ?');
      $stmt->execute([$_GET['pid']]);
      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
      break;
  }
  
  header('Content-Type: application/json');
  echo json_encode($result);
}

其中,上述代码需要根据实际情况修改数据库连接信息。

六、总结

大陆省市区三级联动数据库和详细地址选择组件可以快速地完成表单地址选择功能的开发,同时也为后续有关地址相关开发提供了方便。

但需要注意的是,使用该组件前需要填充好数据库中的省、市、区数据,并提供好数据接口。

大陆省市区三级联动数据库 - 详细地址选择

2023-05-17
微信小程序省市区三级联动

2023-05-19
省市级联所需数据库mysql版(省市区级联sql)

2022-11-16
省市区多级联动js代码(html地区三级联动)

本文目录一览: 1、省市县三级联动菜单,JS全国省市县(区)联动,怎样连接到数据库啊? 2、省市区三级联动下拉菜单应该怎么写 3、javascript实现二级联动,比如连个下拉列表,一个选择省份,另一

2023-12-08
ElementUI省市区三级联动详解

2023-05-22
省市区级联表mysql,省市区级联查询

2022-11-29
js省份城市二级联动源码(ajax省市区三级联动代码)

本文目录一览: 1、bootstrap-select.js 怎么联动改变,例如:省份,城市二级联动。 2、JS实现一级地区和二级地区联动!求高手改代码!!!万分感谢!!! 3、javascript实现

2023-12-08
省市区县乡镇村mysql数据库,中国省市区县乡镇村信息

2022-11-23
全国省市区JSON数据详解

2023-05-23
省市县三级联动的实现

2023-05-20
全国城市列表mysql数据库(全国省市区数据库)

2022-11-13
省市区三级联动的js文件,js省市县三级联动

本文目录一览:...

2023-12-08
省份城市数据库mysql(省市区数据库)

2022-11-15
mysql省市县数据库(全国省市县数据库)

2022-11-15
Vue地址选择器详解

2023-05-19
城市选择器js代码下载,jquery城市选择器

本文目录一览: 1、从网上下载了个级联菜单选择城市的JS 发现获取到的是城市代码 怎么获取城市名? 2、求推荐vue.js地址选择插件和地图插件 3、谁有js下拉选择省份,城市,地区(英文) 4、Js

2023-12-08
js四级联动完整代码,JS二级联动

本文目录一览: 1、javascript如何实现4级联动 2、求用ASP.Net实现一个四级联动的下拉列表 3、求四级联动代码(ASP+JS) 4、求一个JS jquery地区选择的四级联动插件,1.

2023-12-08
跪求js城市四级联动代码,js城市二级联动

本文目录一览: 1、求四级联动代码(ASP+JS) 2、javascript如何实现4级联动 3、根据数据库表格当中的数据怎么设置四级联动 js 求四级联动代码(ASP+JS) !DOCTYPE HT

2023-12-08
省市区代码js(省市区代码划分标准)

本文目录一览: 1、怎样用js实现省市联动,数据是从数据库读取? 谢谢了 2、JavaScript实现省市县级联 3、如何用js实现省市区之间的三级联动 4、用JS实现省市下拉框怎么做? 5、省市区下

2023-12-08
微信小程序省市区选择器的详细阐述

2023-05-17