麻烦老师检查下

首页课程实战体系课手记专栏慕课教程

麻烦老师检查下

来源：3-12 自由编程

学习plus

2020-10-16 11:01:46

具体遇到的问题

报错信息的截图

尝试过的解决思路和结果

粘贴全部相关代码，切记添加代码注释（请勿截图）

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b8be011c2c2cb53ab3503877757970fc"></script> 
	<style type="text/css">
		/*common*/
		* { margin: 0; padding: 0; }
		button { border: none; outline: none; }
		.rl {float: right;}
		.clr:after { content: '';height: 0;display: block;clear: both; visibility: hidden;}
		.fc {color: red;}
		/*node*/
		#container {width:100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }  
		#search {width: 400px; height: 350px; position: absolute; top: 10px; left: 10px; box-shadow: 2px 5px 5px 2px gray; border: 1px solid #ccc; background: #fff; z-index: 99;}
		#title { width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 30px; font-weight: bold; color: #000;}
		#input .item {height: 40px; margin: 5px 10px;}
		#input .item span{ line-height: 40px; font-size: 16px;}
		#input .item input{width: 200px; height: 31px; margin-left: 15px;}
		#input .item .btn{width: 50px; height: 35px; background-color: #87CEEB; margin-left: 10px; color: #fff;}
		#limitControl { text-align: center; }
		#limitControl #limitBtn { width: 100px; height: 35px; background-color: #ccc; color: #000;}
		#localShow {position: absolute; bottom: 50px; right: 20px;}
		#localShow span{font-size: 16px;}
		#tip { position: absolute; bottom: 20px; right: 20px; }
		#tip span{ text-align: center; font-size: 16px; }
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="search">
		<div id="title">工具栏</div>
		<div id="input">
			<div class="item clr">
				<button class="btn rl" data-btn="city">确定</button>
				<input class="rl" type="text" name="" id="" data-search="city">
				<span class="rl">搜索城市</span>
			</div>
			<div class="item clr">
				<button class="btn rl" data-btn="zoom">确定</button>
				<input class="rl" type="text" name="" id="" data-search="zoom">
				<span class="rl">设置显示级别</span>
			</div>
		</div>
		<div id="limitControl">
			<button id="limitBtn">解除范围限制</button>
		</div>
		<div id="localShow">
			<p>当前所在省/直辖市：<span></span></p>
		</div>		
		<div id="tip">
			<span class="fc"></span>
		</div>
	</div>

	<script type="text/javascript">
		//节点获取
		var $limitBtn = $('#limitBtn'),
			$search = $('#search'),
			$searchInputs = $('#input').find('input'),
			$searchBtns = $('#input').find('button'),
			$localShow = $('#localShow').find('span'),
			$tip = $('#tip').find('span');
		var myMap = new AMap.Map('container');
		var myBounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
		myMap.setBounds(myBounds);
		myMap.setLimitBounds(myMap.getBounds());
		$search.data('limitIF','limit');
		myMap.getCity(function(info){
			$localShow.html(info.province + (!!info.city?'/'+info.city:''));
		});

		//范围限制解除功能
		$limitBtn.on('click',function(){
			var limitData = $search.data('limitIF');
			if(limitData === 'limit'){
				myMap.clearLimitBounds();
				$search.data('limitIF','nolimit');
				$limitBtn.html('限制范围限制');
				$tip.html('');
			}else{
				myMap.setLimitBounds(myMap.getBounds());
				$search.data('limitIF','limit');
				$limitBtn.html('解除范围限制');
			}
		})

		// 鼠标拖动_直辖市更新
		myMap.on('moveend',function(){
			myMap.getCity(function(info){
				$localShow.html(info.province + (!!info.city?'/'+info.city:''));
			});
		})

		// 鼠标点击_经纬度获取_中心点替代
		myMap.on('click',function(e){
			//检测是否范围限制
			if($search.data('limitIF') == "limit"){
				$tip.html('请先解除地图限制');
				return;
			}
			var yNode = e['lnglat']['Q'];
				xNode = e['lnglat']['R'];
			myMap.setCenter([xNode,yNode]);

		})

		//城市 级别 搜索功能
			$searchBtns.each(function(){
				var $this = $(this);
				$this.on('click',function(){
					if($this.data('btn') == "city"){
						searchChose($searchInputs,myMap,"city");
					}else if($this.data('btn') == "zoom"){
						searchChose($searchInputs,myMap,"zoom");
					}
				});
			});
			//方法封装
			function searchChose($se,ce,dataVal){
				var dataName = 'search';
				var fName = '';
				var data = {
					"city" : "setCity",
					"zoom" : "setZoom"
				}
				for(var p in data){
					if(p == dataVal){
						fName = data[p];
						break;
					}
				}
				//检测是否范围限制
				if(fName == "setCity" && $search.data('limitIF') == "limit"){
					$tip.html('请先解除地图限制');
					return;
				}
				$se.each(function(){
					var $this = $(this);
					if($this.data(dataName) == dataVal){
						var Val = $this.val();
						ce[fName](Val);
					}
				});
			}
	</script> 
</body>
</html>
在这里输入代码

写回答

1回答