250 lines
7.5 KiB
HTML
250 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<title>地址智能识别</title>
|
||
<link rel="icon" type="image/x-icon" href="img/smart.png" />
|
||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||
<script src="js/jquery.min.js"></script>
|
||
<script src="js/pcasCode.js"></script>
|
||
<script src="js/zipCode.js"></script>
|
||
<script src="js/address_parse.js"></script>
|
||
<script src="js/bootstrap.min.js"></script>
|
||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||
<script src="js/axios.js"></script>
|
||
|
||
<style>
|
||
#value .key {
|
||
color: #ff5722;
|
||
display: inline-block;
|
||
width: 111px;
|
||
text-align: right;
|
||
}
|
||
|
||
#value .value {
|
||
color: #366500;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
li {
|
||
padding: 5px;
|
||
}
|
||
|
||
li:hover {
|
||
cursor: pointer;
|
||
background: #8bc34aa1;
|
||
padding: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page-header">
|
||
<h1>
|
||
地址智能识别
|
||
<small>支持省市区街道/姓名/电话/邮编/身份证号码(字母大写)</small>
|
||
<a
|
||
class="github-button"
|
||
href="https://github.com/wzc570738205/smartParsePro"
|
||
data-size="large"
|
||
data-show-count="true"
|
||
aria-label="Star wzc570738205/smartParsePro on GitHub"
|
||
>Star</a
|
||
>
|
||
</h1>
|
||
</div>
|
||
|
||
<div class="alert alert-danger" role="alert">地址、姓名、电话、邮编、身份证号码（字母大写）用空格或者特殊字符分开!!（支持以下数据格式</div>
|
||
<div>
|
||
特殊字符<code>~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“’。，、？-</code>
|
||
</div>
|
||
<br />
|
||
<ol>
|
||
<li>广东省珠海市香洲区盘山路28号幸福茶庄,陈景勇，13593464918</li>
|
||
<li>马云，陕西省西安市雁塔区丈八沟街道高新四路高新大都荟 13593464918</li>
|
||
<li>陕西省西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
|
||
<li>西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
|
||
<li>雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918 211381198512096810</li>
|
||
<li>北京市朝阳区姚家园3楼 13593464918 马云</li>
|
||
<li>河北省石家庄市新华区中华北大街68号鹿城商务中心6号楼1413室 150-3569-6956 马云</li>
|
||
<li>疆维吾尔自治区乌鲁木齐市沙依巴克区西虹东路463号 400-1808855 小红</li>
|
||
<li>新疆阿克苏温宿县博孜墩柯尔克孜族乡吾斯塘博村一组306号 800-8585222 马云</li>
|
||
</ol>
|
||
|
||
<textarea
|
||
class="form-control"
|
||
onchange="getAddress()"
|
||
cols="50"
|
||
rows="5"
|
||
id="textarea"
|
||
placeholder="请粘贴你的地址或者点击上述地址进行识别"
|
||
></textarea>
|
||
<h4>省市区街道四级联动</h4>
|
||
<form class="form-inline">
|
||
<div class="form-group">
|
||
<label for="exampleInputName2">省/直辖市</label>
|
||
<select class="form-control" id="province">
|
||
<option>请选择</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail2">市</label>
|
||
<select class="form-control" id="city">
|
||
<option>请选择</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail2">区/县</label>
|
||
<select class="form-control" id="county">
|
||
<option>请选择</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail2">镇/乡/街道</label>
|
||
<select class="form-control" id="street">
|
||
<option>请选择</option>
|
||
</select>
|
||
</div>
|
||
</form>
|
||
<div id="response"></div>
|
||
<div id="value"></div>
|
||
</body>
|
||
</html>
|
||
<script>
|
||
$('li').on('click',function(e){
|
||
$("#textarea").val( $(this).html().trim())
|
||
getAddress()
|
||
})
|
||
function getAddress() {
|
||
let parse_list = smart($("#textarea").val());
|
||
let html = "";
|
||
for (let key in parse_list) {
|
||
if (parse_list[key]) {
|
||
html +=
|
||
`<p><span class="key">` +
|
||
key +
|
||
`</span>:<span class="value">` +
|
||
parse_list[key] +
|
||
`</span></p>`;
|
||
}
|
||
}
|
||
$("#value").html(html);
|
||
|
||
axios({
|
||
method: "post",
|
||
url: "https://wangzc.wang/smAddress",
|
||
data: {
|
||
address: $("#textarea").val(),
|
||
},
|
||
}).then(function (res) {
|
||
$('#response').html(`<span style="color:green">接口调用状态码：200；当前调用次数：`+res.data.requestNumber+`</span>`)
|
||
}).catch(function(err){
|
||
$('#response').html(`<span style="color:red">接口调用状态码：500</span>`)
|
||
});
|
||
|
||
$("#province").val(parse_list.provinceCode);
|
||
$("#city").val(parse_list.cityCode);
|
||
$("#county").val(parse_list.countyCode);
|
||
$("#street").val(parse_list.streetCode);
|
||
|
||
getCity($("#province").val(), parse_list);
|
||
getCounty($("#city").val(), parse_list);
|
||
getStreet($("#county").val(), parse_list);
|
||
}
|
||
addressList = pcassCode;
|
||
addressList.forEach((item) => {
|
||
formatAddresList(item, 1, "");
|
||
});
|
||
let province = "";
|
||
addressList.forEach((res) => {
|
||
province += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
||
});
|
||
$("#province").html(province);
|
||
getCity($("#province").val());
|
||
getCounty($("#city").val());
|
||
getStreet($("#county").val());
|
||
|
||
$("#province").change((res) => {
|
||
let provinceCode = $("#province").val();
|
||
getCity(provinceCode);
|
||
getCounty($("#city").val());
|
||
getStreet($("#county").val());
|
||
});
|
||
|
||
$("#city").change((res) => {
|
||
let cityCode = $("#city").val();
|
||
getCounty(cityCode);
|
||
getStreet($("#county").val());
|
||
});
|
||
|
||
$("#county").change((res) => {
|
||
let countyCode = $("#county").val();
|
||
getStreet(countyCode);
|
||
});
|
||
|
||
function getCity(provinceCode, parse_list) {
|
||
let cityList = [];
|
||
let city = "";
|
||
addressList.forEach((res) => {
|
||
if (res.code == provinceCode) {
|
||
cityList = res.children;
|
||
return;
|
||
}
|
||
});
|
||
cityList.forEach((res) => {
|
||
city += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
||
});
|
||
$("#city").html(city);
|
||
if (parse_list) {
|
||
$("#city").val(parse_list.cityCode);
|
||
}
|
||
}
|
||
|
||
function getCounty(cityCode, parse_list) {
|
||
let countyList = [];
|
||
let county = "";
|
||
addressList.forEach((el) => {
|
||
el.children.forEach((res) => {
|
||
if (res.code == cityCode) {
|
||
countyList = res.children;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
|
||
countyList.forEach((res) => {
|
||
county += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
||
});
|
||
$("#county").html(county);
|
||
if (parse_list) {
|
||
$("#county").val(parse_list.countyCode);
|
||
}
|
||
}
|
||
|
||
function getStreet(countyCode, parse_list) {
|
||
let streetList = [];
|
||
let street = "";
|
||
addressList.forEach((el) => {
|
||
el.children.forEach((element) => {
|
||
element.children.forEach((res) => {
|
||
if (res.code == countyCode) {
|
||
streetList = res.children;
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
streetList.forEach((res) => {
|
||
street += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
||
});
|
||
$("#street").html(street);
|
||
if (parse_list) {
|
||
$("#street").val(parse_list.streetCode);
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|