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

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

腾讯地图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)}})}})();},//回填省HTMLAllprovinceHtml: 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

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

腾讯地图城市选择插件-三级联动相关推荐

【Ajax Servlet JSP MySQL】Ajax实现省份地区选择：三级联动
三级联动效果展示环境 Eclipse for Java EE MySQL数据库相关使用语言 Java(Java,Servlet后台处理) Web(HTML,CSS,JS,JSON,GSON.JS与 ...
jQuery世界国家城市选择插件
下载地址这款jQuery国家选择插件样式挺好看,世界国家城市多级联动选择功能很强大,不仅支持全世界各个国家城市的多级联动,而且每一级都支持关键词搜索,可以快速定位需要选择的国家和城市. dd:
基于mint-ui的城市选择3级联动
1.实际效果 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: https://github.com/artiely/Administrative-divisions-of-China( ...
演员选择框三级联动（原生javascript和jquery实现）
使用Jquery做成选择演员选择框的三级联动效果.代码如下,测试可以下载附件. <html><head><meta http-equiv="Content-Ty ...
html中选择省份城市,省份、城市、区县三级联动Html代码
$(function(){ function objInit(obj){ return $(obj).html("请选择"); } var arrData = { 江西省:{宜春市 ...
城市选择插件 V-Distpicker 组件详解以及全套用法
首先第一步,这个插件是一定要在vue项目中使用的一,安装使用 npm 安装: npm install v-distpicker --save 使用 yarn 安装 yarn add v-distp ...
HTML+CSS+JS实现 ❤️echarts省市区地图城市选择❤️
效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0; }body {font-family: Exo, '-apple-system', 'Open ...
省份城市区县三级联动html代码,基于Jquery实现省份、城市、区县三级联动
-//W3C//DTD HTML 4.01 Transitional//EN" ";> $(document).ready(function(){ //省份城市数组 var ...
jquery仿携程网城市选择插件
效果------- HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

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

腾讯地图城市选择插件-三级联动相关推荐

最新文章

热门文章