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

最新推荐文章于 2024-05-08 12:42:46 发布

虾米博客

最新推荐文章于 2024-05-08 12:42:46 发布

阅读量894

点赞数 2

分类专栏： js 插件 html

本文链接：https://blog.csdn.net/m0_37596829/article/details/87541282

版权

js 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

插件

6 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

虾米觉得-腾讯地图既然开放有最新城市数据--就没有必要自己直接去维护了，

之前有写过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的--完全可以修改为自己插件所需的格式

点赞哦~~~~·

虾米博客

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
mui 城市3级联动--腾讯地图数据版

虾米觉得-腾讯地图既然开放有最新城市数据--就没有必要自己直接去维护了，之前有写过pc版本的-现在写一个mui版本的mui 引入依赖js 代码：function cityLoadData() { var $$ = jQuery.noConflict(); $$.ajax({ url: "https://apis.map.qq.com/ws/district/v1/list...
复制链接

扫一扫