腾讯地图数据城市3级联动-id版

 之前写过传地址的--还有bug也没有去修复，

虾米我重新写了一份ID版本的--毕竟这样更适合需求

/**
 @Name : QQ腾讯地图 三级联动插件
 @Author: chen RiGuang
 @Date: 2018-07-13
 修改2019-1-1 地方名更改为地方ID
//用法
$("#city1").createLinkage({
	province : '440000',//初始默认地方ID，不设定就默认第一个
	city : '440100',
	district : '440103',
	backFn : function(data) {
		console.log(data)//选中反馈省市区数据
	}
});
 */

var Storage = window.sessionStorage; 
var key = "WIIBZ-D5F33-ZMD3E-YEOJJ-AMZOS-YKB7K"; 
//省
var $a = 1;
(function($) {
	var ms = {
		init: function(obj, args) {
			return(function() {
				//腾讯地图单个key每秒最高5次,多个地图插件同时使用时延迟实例创建执行
				//个人开发者：日调用量 10,000次/接口/Key   并发限制 5次/秒/接口/Key
				//企业开发者：日调用量 300,000次/接口/Key   并发限制 50次/秒/接口/Key
				if(args.reload) {

				} else {
					$(obj).html("");
					if($a == 1) {
						ms.AllprovinceData(obj, args);
						ms.bindEvent(obj, args);
						$a++;
					} else {
						setTimeout(function() {
							ms.AllprovinceData(obj, args);
							ms.bindEvent(obj, args);
						}, 500)
					}
				}

			})();
		},
		//查出省数据
		AllprovinceData: function(obj, args) {
			return(function() {
				var searchContext = Storage.getItem("provinceData");
				if(searchContext != null) {
					searchContext = JSON.parse(searchContext);
					ms.AllprovinceHtml(obj, args, searchContext)
				} else {
					$.ajax({
						url: "https://apis.map.qq.com/ws/district/v1/getchildren",
						dataType: "jsonp",
						data: {
							output: "jsonp",
							key: key
						},
						cache: false,
						success: function(data) {
							var searchContext = data.result[0];
							Storage.setItem("provinceData", JSON.stringify(searchContext));
							ms.AllprovinceHtml(obj, args, searchContext);
						}
					})
				}
			})();
		},
		//回填省HTML
		AllprovinceHtml: function(obj, args, searchContext) {
			//下拉数据列表框
			var CityHtml = '
' +
				'
' +
				'
' +
				'
' +
				'
' +
				'
';
			//省市区三个select
			var cityBox = '
' +
				'
' + CityHtml + '
' +
				'
' + CityHtml + '
' +
				'
' + CityHtml + '
' +
				' 
';
			obj.append(cityBox);
			var listLi = '
';
			var presetValue = ""; //预先设定了默认省
			$.each(searchContext, function(i, n) {
				var $clone = $(listLi).clone();
				$clone.text(n.fullname); //地方全称
				$clone.attr("id-value", n.id);
				$clone.attr("name", n.id);
				if(n.id == args.province) {
					presetValue = n.fullname;
					$clone.addClass('active-this'); //添加选中class
					obj.find("." + args.provinceId + ' .selectTest').attr("pid", n.id); //select更改pid
				}
				obj.find("." + args.provinceId + ' ul').append($clone);
			})
			if(presetValue != "") { //有设定了默认值，显示全称
				obj.find("." + args.provinceId + ' .selectTest').text(presetValue);
			} else { //没有设定了默认值//以第一个作为选中//默认显示第一个的全称//默认第一个的ID作为pid
				obj.find("." + args.provinceId + ' ul li').eq(0).addClass("active-this");
				obj.find("." + args.provinceId + ' .selectTest').text(obj.find("." + args.provinceId + ' ul li').eq(0).text());
				obj.find("." + args.provinceId + ' .selectTest').attr("pid", obj.find("." + args.provinceId + ' ul li').eq(0).attr("id-value"));
			}
			var parentPid = obj.find("." + args.provinceId + ' .selectTest').attr("pid"); //获取省ID用于查出市数据
			ms.AllcityORdistrictData(obj, args, parentPid, 1);
		},
		//查出市或区数据
		AllcityORdistrictData: function(obj, args, cityidORdistrictid, $ide) {
			return(function() {
				var searchContext = Storage.getItem(cityidORdistrictid);
				if(searchContext != null) {
					var cityORdistrictData = JSON.parse(searchContext)
					ms.AllCityHtml(obj, args, cityORdistrictData, $ide)
				} else {
					$.ajax({
						url: "https://apis.map.qq.com/ws/district/v1/getchildren",
						dataType: "jsonp",
						data: {
							output: "jsonp",
							key: key,
							id: cityidORdistrictid
						},
						cache: false,
						success: function(data) {
							if(data.message == "错误的id") {
								return;
							} else if(data.message == "此key每秒请求量已达到上限") {
								location.reload();
							} else {
								var cityORdistrictData = data.result[0];
								Storage.setItem(cityidORdistrictid, JSON.stringify(cityORdistrictData));
								ms.AllCityHtml(obj, args, cityORdistrictData, $ide);
							}
						}
					})
				}
			})();
		},
		//回填市或区数据
		AllCityHtml: function(obj, args, cityORdistrictData, $ide) {
			return(function() {
				var cityidORdistrictid = ""; //市或区id
				var presetValue = ""; //市或区预先设定的默认地方
				if($ide == 1) { //市数据
					cityidORdistrictid = args.cityId;
					presetValue = args.city;
				} else if($ide == 2) { //区数据
					cityidORdistrictid = args.districtId;
					presetValue = args.district;
				}
				var listLi = '
';
				var ifSetCity = false;
				$.each(cityORdistrictData, function(i, n) {
					var $clone = $(listLi).clone();
					$clone.text(n.fullname); //地方全称
					$clone.attr("id-value", n.id);
					$clone.attr("name", n.id);
					if(n.id == presetValue) {
						ifSetCity = true;
						presetValue = n.fullname;
						$clone.addClass('active-this'); //添加选中class
						obj.find("." + cityidORdistrictid + ' .selectTest').attr("pid", n.id); //select更改pid
					}
					obj.find("." + cityidORdistrictid + ' ul').append($clone);
				})

				if(ifSetCity) { //有设定了默认值，显示全称
					obj.find("." + cityidORdistrictid + ' .selectTest').text(presetValue);
				} else { //没有设定了默认值//以第一个作为选中//默认显示第一个的全称//默认第一个的ID作为pid
					obj.find("." + cityidORdistrictid + ' ul li').eq(0).addClass("active-this");
					obj.find("." + cityidORdistrictid + ' .selectTest').text(obj.find("." + cityidORdistrictid + ' ul li').eq(0).text());
					obj.find("." + cityidORdistrictid + ' .selectTest').attr("pid", obj.find("." + cityidORdistrictid + ' ul li').eq(0).attr("id-value"));
				}
				var parentPid = obj.find("." + cityidORdistrictid + ' .selectTest').attr("pid"); //获取pid用于查出下一级数据
				if($ide == 1) { //如果当前执行的是市就查询区数据
					ms.AllcityORdistrictData(obj, args, parentPid, 2);
				} else if($ide == 2) {
					//如果当前执行的是区就把当前所有选中的数据反馈
					var province = obj.find("." + args.provinceId + ' .selectTest').text();
					var city = obj.find("." + args.cityId + ' .selectTest').text();
					var district = obj.find("." + args.districtId + ' .selectTest').text();
					var provinceid = obj.find("." + args.provinceId + ' .selectTest').attr("pid");
					var cityid = obj.find("." + args.cityId + ' .selectTest').attr("pid");
					var districtid = obj.find("." + args.districtId + ' .selectTest').attr("pid");
					args.province = province;
					args.city = city;
					args.district = district;
					args.provinceid = provinceid;
					args.cityid = cityid;
					args.districtid = districtid;
					ms.backData(obj, args);
				}
			})();
		},
		//绑定事件
		bindEvent: function(obj, args) {
			return(function() {
				// 空白事件
				$(document).click(function(e) { // /父区域 居住地select显示隐藏
					$.each($('.countryTd'), function(i, n) {
						var _con = $(n);
						if(!_con.is(e.target) && _con.has(e.target).length === 0) {
							_con.find('.selectTestBox').hide(); // 空白事件
						}
					})
				})
				if(!args.disabled) {
					$("." + args.provinceId).removeClass("city-disabled");
					$("." + args.cityId).removeClass("city-disabled");
					$("." + args.districtId).removeClass("city-disabled");
					obj.unbind("click").click(function(e) {
						var target = $(e.target);
						var _thisCity = $(this).find(".selectCity");
						var _thisSelect = $(this).find(".listSelect");
						if(_thisCity.has(e.target).length > 0) {
							var countryTd = $(e.target).parents(".countryTd").attr("name");
							var _this = $(this).find("." + countryTd + " .selectCity");
							var _thisId = obj.find("." + countryTd);
							if(_thisId.find(".selectTestBox").is(":hidden")) {
								_thisId.find(".selectTestBox").show();
							} else {
								_thisId.find(".selectTestBox").hide();
							}
						} else {
							var countryTd = $(e.target).parents(".countryTd").attr("name"); //
							var _this = $(e.target);
							var test = _this.text(); //选中的名称
							var $id = _this.attr("id-value"); //选中的ID
							var _thisId = obj.find("." + countryTd);
							_this.addClass("active-this").siblings().removeClass("active-this");
							obj.find(".selectTestBox").hide();
							//选中的与当前默认值不相同就重新反馈省市区数据
							if($id != _thisId.find('.selectTest').attr("pid")) {
								_thisId.find('.selectTest').text(test); //更改最新名称
								_thisId.find('.selectTest').attr("pid", $id); //更改最新id

								if(countryTd == args.provinceId) {
									//更改了省重加载市区
									obj.find('.' + args.cityId + " " + "ul").html("");
									obj.find('.' + args.districtId + " ul").html("");
									ms.AllcityORdistrictData(obj, args, $id, 1);

								} else if(countryTd == args.cityId) {
									//更改了市重加载区
									obj.find('.' + args.districtId + " ul").html("");
									ms.AllcityORdistrictData(obj, args, $id, 2);

								} else if(countryTd == args.districtId) {
									//更改了区就反馈省市区数据
									var province = obj.find("." + args.provinceId + ' .selectTest').text();
									var city = obj.find("." + args.cityId + ' .selectTest').text();
									var district = obj.find("." + args.districtId + ' .selectTest').text();
									var provinceid = obj.find("." + args.provinceId + ' .selectTest').attr("pid");
									var cityid = obj.find("." + args.cityId + ' .selectTest').attr("pid");
									var districtid = obj.find("." + args.districtId + ' .selectTest').attr("pid");
									args.province = province;
									args.city = city;
									args.district = district;
									args.provinceid = provinceid;
									args.cityid = cityid;
									args.districtid = districtid;
									ms.backData(obj, args);
								}
							}
						}
					})
				} else {
					$("." + args.provinceId).find(".selectTest").addClass("city-disabled");
					$("." + args.cityId).find(".selectTest").addClass("city-disabled");
					$("." + args.districtId).find(".selectTest").addClass("city-disabled");
				}
			})();
		},
		backData: function(obj, args) {
			return(function() {
				//				返回事件
				var selectDATA = {
					province: args.province,
					city: args.city,
					district: args.district,
					provinceid: args.provinceid,
					cityid: args.cityid,
					districtid: args.districtid
				}
				args.backFn(selectDATA);
			})();
		},
		load: function(obj, args) {
			return(function() {
				$("." + args.provinceId).find(".selectTest").eq(0).click();
			})();
		}
	}
	$.fn.createLinkage = function(options) {
		var args = $.extend({
			provinceId: "province", //class
			cityId: "city",
			districtId: "district",
			province: '440000', //初始默认地方ID，不设定就默认第一个
			city: '',
			district: '',
			disabled: false,
			backFn: function() {} //选中反馈省市区数据
		}, options);
		ms.init(this, args);
	}
})(jQuery)

使用：

点赞哦~~~