mui 城市3级联动--腾讯地图数据版
虾米觉得-腾讯地图既然开放有最新城市数据--就没有必要自己直接去维护了，
之前有写过pc版本的-现在写一个mui版本的
mui 引入依赖
js 代码：
function cityLoadData() {
var $$ = jQuery.noConflict();
$$.ajax({
url: "https://apis.map.qq.com/ws/district/v1/list",
dataType: "jsonp",
data: {
output: "jsonp",
key: 'WIIBZ-D5F33-ZMD3E-YEOJJ-AMZOS-YKB7K'
},
cache: false,
success: function(data) {
console.log(data)
var cityData3 = [];
for(var i = 0; i < data.result[0].length; i++) {
var n = data.result[0][i];
var id = n.id.substr(0, 2);
for(key in n) {
n["value"] = n.id;
n["text"] = n.fullname;
n["children"] = [];
}
for(var i1 = 0; i1 < data.result[1].length; i1++) {
var n1 = data.result[1][i1];
var id1 = n1.id.substr(0, 2);
var id1_1 = n1.id.substr(0, 4);
if(id == id1) {
for(key in n1) {
n1["value"] = n1.id;
n1["text"] = n1.fullname;
n1["children"] = [];
}
n["children"].push(n1);
for(var i2 = 0; i2 < data.result[2].length; i2++) {
var n2 = data.result[2][i2];
var id2 = n2.id.substr(0, 4);
if(id1_1 == id2) {
for(key in n2) {
n2["value"] = n2.id;
n2["text"] = n2.fullname;
}
n1["children"].push(n2);
}
}
}
}
cityData3.push(n)
}
cityData3 = JSON.stringify(cityData3)
window.sessionStorage.setItem("cityData3", cityData3)
}
});
}
cityLoadData();html使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<link href="css/mui.picker.all.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<style>
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
}
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.ui-alert {
text-align: center;
padding: 20px 10px;
font-size: 16px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">mui腾讯地图城市3级联动插件</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<!--<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例</button>-->
<div class="mui-input-row" id='showCityPicker3'>
<input id="cityResult3" type="text" placeholder="请选择">
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.all.js"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
;(function($, doc) {
$.init();
$.ready(function() {
var timer = setInterval(function(){
//因为数据需要去腾讯获取--所以这里虾米使用了缓存方式；轮询数据返回方式
var cityData3 = window.sessionStorage.getItem("cityData3");
if(cityData3){
clearInterval(timer);
cityData3 =JSON.parse(cityData3);
// //级联示例
var cityPicker3 = new $.PopPicker({
layer: 3
});
cityPicker3.setData(cityData3);
var showCityPickerButton = doc.getElementById('showCityPicker3');
var cityResult3 = doc.getElementById('cityResult3');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker3.show(function(items) {
var city3 = (items[2] || {}).text== undefined?"":(items[2] || {}).text;
var tx3 =(items[0] || {}).text + " " + (items[1] || {}).text + " " + city3;
cityResult3.value = tx3;
});
}, false);
}
},300);
});
})(mui, document);
</script>
</body>
</html>博主提示
js只是把腾讯地图获取到的数据重组为mui所使用的格式，
我们用的时候，如果不是mui的--完全可以修改为自己插件所需的格式
点赞哦~~~~·