腾讯地图城市选择插件-三级联动

其他 2018-08-09 05:20:24 阅读次数: 0

城市数据来自于腾讯地图-

腾讯地图api http://lbs.qq.com/webservice_v1/guide-region.html 

1.设计思路

1.因为是传城市ID获取下级城市数据-所以这里做了一个缓存-sessionStorage，就是城市ID来作为KEY值，这样加载过的就可以读取缓存来加载数据了，最新的就去腾讯上面获取数据

2.因为并发限制：5次/秒/接口/Key-所以多个城市一起加载的时候-后面加载的需要延迟一点时间加载（我这里延迟了500）

2.实现接口

 我这里的key使用开放的  key = "WIIBZ-D5F33-ZMD3E-YEOJJ-AMZOS-YKB7K"；

 getchildren接口：https://apis.map.qq.com/ws/district/v1/getchildren 

使用jq 的ajax获取数据--下面获取省级数据：

例子1：

$.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];	
		}
	})

那么，获取市级/县级就在以上的例子的data中加多一个id即可

data: {
         output: "jsonp",
	 key: key,
         id:cityId
	},

原理：

1.自定义插件方法

      了解$.fn和$.extend自定义插件

2.三级联动

1.省-》市-》县   2.市-》县   3.县

操作：点击省-》后面联动市和县-

         同理操作 市 就 只联动县  ，

         那么操作县，就停止往下操作

效果图：


代码：

js:

/**
 @Name : QQ腾讯地图 三级联动插件
 @Author: chen RiGuang
 @Date: 2018-07-13
 */
var Storage = window.sessionStorage; 
var key = "WIIBZ-D5F33-ZMD3E-YEOJJ-AMZOS-YKB7K"; 
//省
var $a=1;
(function($) {
	var ms = {
		init: function(obj, args) {
			return(function() {
				if($a==1){
					//腾讯地图单个key每秒最高5次,多个地图插件同时使用时延迟实例创建执行
					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(data.result[0]));
							ms.AllprovinceHtml(obj, args, searchContext)
						}
					})
				}
			})();
		},
		//回填省HTML
		AllprovinceHtml: function(obj, args, searchContext) {
			var CityHtml = '<div class="selectCity"><div class="selectTest"></div>' +
				'<div class="iconDown"></div>' +
				'</div>' +
				'<div class="selectTestBox">' +
				'<ul class="ub-fh"></ul>' +
				'</div>';
			var cityBox = '<div class="clear">' +
				'<div name="' + args.provinceId + '" class="' + args.provinceId + '  countryTd">' + CityHtml + '</div>' +
				'<div name="' + args.cityId + '" class="' + args.cityId + ' countryTd">' + CityHtml + '</div>' +
				'<div name="' + args.districtId + '" class="' + args.districtId + ' countryTd">' + CityHtml + '</div>' +
				' </div>';
			obj.append(cityBox);
			var listLi = '<li class="listSelect"></li>';
			var ifSetCity = false;
			$.each(searchContext, function(i, n) {
				var $clone = $(listLi).clone();
				$clone.text(n.fullname);
				$clone.attr("id-value", n.id);
				$clone.attr("name", n.fullname);
				if(n.fullname == args.province) {
					ifSetCity = true;
					$clone.addClass('active-this');
					obj.find("." + args.provinceId + ' .selectTest').attr("pid", n.id);
				}
				obj.find("." + args.provinceId + ' ul').append($clone);
			})
			if(ifSetCity) {
				obj.find("." + args.provinceId + ' .selectTest').attr("title",args.province);
				obj.find("." + args.provinceId + ' .selectTest').text(args.province);
			} else {
				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 provincePid = obj.find("." + args.provinceId + ' .selectTest').attr("pid");
			ms.AllCityData(obj, args, provincePid, 1)
		},
		//市-县数据
		AllCityData: function(obj, args, cityid, $ide) {
			return(function() {
				var searchContext = Storage.getItem(cityid);
				if(searchContext != null) {
					var cityData = JSON.parse(searchContext)
					ms.AllCityHtml(obj, args, cityData, $ide)
				} else {
					$.ajax({
						url: "https://apis.map.qq.com/ws/district/v1/getchildren",
						dataType: "jsonp",
						data: {
							output: "jsonp",
							key: key,
							id: cityid
						},
						cache: false,
						success: function(data) {
							if(data.message == "错误的id") {return;} else if(data.message=="此key每秒请求量已达到上限"){
								 location.reload();
							}else{
								Storage.setItem(cityid, JSON.stringify(data.result[0]));
								var cityData = data.result[0];
								ms.AllCityHtml(obj, args, cityData, $ide);
							}
						}
					})
				}
			})();
		},
		//回填市县数据
		AllCityHtml: function(obj, args, cityData, $ide) {
			return(function() {
				var nameId = "";
				var $name = "";
				if($ide == 1) {
					nameId = args.cityId;
					$name = args.city;
				} else if($ide == 2) {
					nameId = args.districtId;
					$name = args.district;
				}
				var listLi = '<li class="listSelect uinn-l"></li>';
				var ifSetCity = false;
				$.each(cityData, function(i, n) {
					var $clone = $(listLi).clone();
					$clone.text(n.fullname);
					$clone.attr("id-value", n.id);
					$clone.attr("name", n.fullname);
					if(n.fullname == $name) {
						ifSetCity = true;
						$clone.addClass('active-this');
						obj.find("." + nameId + ' .selectTest').attr("pid", n.id);
					}
					obj.find("." + nameId + ' ul').append($clone);
				})
				if(ifSetCity) {
					obj.find("." + nameId + ' .selectTest').text($name);
					obj.find("." + nameId + ' .selectTest').attr("title",$name);
				} else {
					obj.find("." + nameId + ' ul li').eq(0).addClass("active-this");
					obj.find("." + nameId + ' .selectTest').text(obj.find("." + nameId + ' ul li').eq(0).text());
					obj.find("." + nameId + ' .selectTest').attr("title",obj.find("." + nameId + ' ul li').eq(0).text());
					obj.find("." + nameId + ' .selectTest').attr("pid", obj.find("." + nameId + ' ul li').eq(0).attr("id-value"));
				}
				var provincePid = obj.find("." + nameId + ' .selectTest').attr("pid");
				if($ide == 1) {
					ms.AllCityData(obj, args, provincePid, 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 selectDATA = {
						province: province,
						city: city,
						district: district
					}
					args.backFn(selectDATA);
				}
			})();
		},
		//绑定事件
		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(); // 空白事件
						}
					})
				})
				// 点击城市框
				obj.on("click",".selectCity",function(){
					var countryTd = $(this).parents(".countryTd").attr("name");
					var _thisId = obj.find("." + countryTd);
					if($(this).siblings(".selectTestBox").is(":hidden")) {
						_thisId.find(".selectTestBox").show();
					} else {
						_thisId.find(".selectTestBox").hide();
					}
				})
				// 选中城市下拉
				obj.on("click",".listSelect",function(){
					var test = $(this).text();
					var $id = $(this).attr("id-value");
					var countryTd = $(this).parents(".countryTd").attr("name");

					var _thisId = obj.find("." + countryTd);
					$(this).addClass("active-this").siblings().removeClass("active-this");
					obj.find(".selectTestBox").hide();
					if(test != _thisId.find('.selectTest').text()) {
						_thisId.find('.selectTest').text(test);
						_thisId.find('.selectTest').attr("title",test);
						if(countryTd == args.provinceId) {
							//省
							obj.find('.' + args.cityId+" "+"ul").html("");
							obj.find('.' + args.districtId+" ul").html("");
							ms.AllCityData(obj, args, $id, 1);

						} else if(countryTd == args.cityId) {
							//市
							obj.find('.' + args.districtId +" ul").html("");
							ms.AllCityData(obj, args, $id, 2)
						}
					}

				})

			})();
		}
	}
	$.fn.createPage = function(options) {
		var args = $.extend({
			provinceId: "province",
			cityId: "city",
			districtId: "district",
			province: '广东省',
			city: '广州市',
			district: '天河区',
			backFn: function() {}
		}, options);
		ms.init(this, args);
	}
})(jQuery)

html:

<!DOCTYPE html>
<html>

	<head>

		<head>
			<meta charset="UTF-8">
			<title></title>
		</head>
		<style type="text/css">
			*{ padding: 0; margin: 0; }
			ol, ul,li { list-style: none; }
			.box{
				width: 500px;
				margin: 20px auto;
			}
			#city2{
				margin-top: 20px;
			}
			.clear:after {
				visibility: hidden;
				clear: both;
				display: block;
				width: 0;
				height: 0;
				content: ".";
			}
			
			.selectTestBox {
				max-height: 200px;
				overflow: auto;
				border: 1px solid #e1e1e1;
				position: absolute;
				z-index: 666;
				left: 0;
				display: none;
				cursor: pointer;
				background: #FFFFFF;
				width: 100%;
			}
			
			.selectCity {
				height: 36px;
				line-height: 36px;
				overflow: hidden;
				background: #F5F5F5;
				position: relative;
			}
			
			.selectTest {
				padding: 0 20px 0 10px;
				max-width: 100%;
				height: 100%;
				cursor: pointer;
			}
			
			.listSelect {
				min-height: 36px;
				line-height: 36px;
				padding-left: 10px;
			}
			
			.listSelect:hover {
				background: #ececec;
				color: #000000;
			}
			
			.active-this,
			.active-this:hover {
				background: #33bb67;
				color: #FFFFFF;
			}
			
			.iconDown {
				background: url(icon_more_bottom.png) no-repeat center;
				right: 5px;
				top: 0px;
				z-index: 2;
				width: 10px;
				height: 100%;
				position: absolute;
			}
			
			.countryTd:first-child+.countryTd {
				margin: 0 20px;
			}
			
			.countryTd {
				width: 150px;
				position: relative;
				float: left;
			}
		</style>

		<body>
			<div class="box">
				<div id="city1"></div>
				<div id="city2"></div>
			</div>

		</body>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="TXCity-min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#city1").createPage({			
				province: '广东省',
				city: '广州市',
				district: '天河区',
				backFn: function(data) {
					console.log(data)
				}

			});
			$("#city2").createPage({				
				province: '广东省',
				city: '深圳市',
				district: '罗湖区',
				backFn: function(data) {
					console.log(data)
				}
			});
		</script>
</html>

使用方法：

$("#city2").createPage({		
		province: '广东省',
		city: '深圳市',
		district: '罗湖区',
		backFn: function(data) {
		console.log(data)
	}
});

新手上路，不喜勿喷

不喜欢复制粘贴的豪哥们看这里，直接下载源码：https://download.csdn.net/download/m0_37596829/10543648

代码繁琐-跪求路过大神指点一下萌新--嘤嘤嘤嘤

猜你喜欢

转载自blog.csdn.net/m0_37596829/article/details/81036063
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022