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使用




	
		
		
		
		
		
		
		
		
	

	
		

mui腾讯地图城市3级联动插件

mui 城市3级联动--腾讯地图数据版_第1张图片

博主提示

js只是把腾讯地图获取到的数据重组为mui所使用的格式,

我们用的时候,如果不是mui的--完全可以修改为自己插件所需的格式

点赞哦~~~~·

你可能感兴趣的:(js,插件,html)