遇到点小问题不会解决了,麻烦老师解决一下,非常感谢!

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

来源：3-12 自由编程

bao_

2021-01-05 11:37:06

问题1:兴趣点范围,搜索下一个地方怎样清空上一次搜索的痕迹

问题2:地点搜索地点的时候偶尔会报错能搜索到但是偶尔获取不到

116行

WQ = data.tips[0].location.Q;

问题3:有没有需要优化的地方,还麻烦老师批评指正,非常感谢

相关截图：

相关代码：

<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#container 
		{
			width:100%; 
			height: 100%;
			position: absolute;
			left: 0px;
			right: 0px;
		}
		#search_panel{
			width: 260px;
			/*height: 500px;*/
			position: absolute;
			left: 5px;
			top: 5px;
			background-color: #dbdee2;
			border-radius: 3px;
			border:1px dashed #dbdee2;
			box-shadow: 0 2px 3px -1px red; 
		} 
		#search_content{
		    width: 200px;
		    height: 25px;
		    padding-left: 7px;
		    border:1px solid pink;
		    border-radius: 3px;
		}
		#zoom_level{
		    width: 132px;
		    height: 25px;
		    padding-left: 7px;
		    border:1px solid pink;
		    border-radius: 3px;
		}
		#btn{
			width: 40px;
			height: 29px;
			border:2px solid pink;
		    border-radius: 3px;
		}
		#btn_true,#btn_interest{
			width: 40px;
			height: 29px;
			margin-top: 5px;
			border:2px solid pink;
		    border-radius: 3px;
		}
		#limit_scope,#relieve_scope{
			width: 80px;
			height: 29px;
			border:2px solid pink;
		    border-radius: 3px;
		    margin-left: 30px;
		}
		#search_interest{
			width: 69px;
		    height: 25px;
		    padding-left: 7px;
		    border:1px solid pink;
		    border-radius: 3px;
		    margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="search_panel">
		<input type="text" name="" id="search_content">
		<button id="btn">搜索</button>

		设置级别:<input type="text" name="" placeholder="10" id="zoom_level">
		<button id="btn_true">确定</button>

		搜索周围的兴趣点:<input type="text" name="" placeholder="美食" id="search_interest">
		<button id="btn_interest">搜索</button>

		<input type="button" name="" value="限定范围" id="limit_scope">
		<input type="button" name="" value="解除范围" id="relieve_scope">
		<div id="content_panel"></div>
	</div>
	<script type="text/javascript">
		var map = new AMap.Map('container',{
			zoom:15,//初始地图的级别
			center:[116.397485,39.90914]// 初始地图的中心点
		});

		var search_panel = new AMap.Autocomplete({
			input:'search_content'//绑定的文本框的id值
		});

		var placeSearch = new AMap.PlaceSearch({
			map:map//再此地图内搜索
		});

		// select发生改变的时候触发
		AMap.event.addListener(search_panel,'select',function(e){
			// console.log(e);
			placeSearch.search(e.poi.name);
		});
	    search_content.oninput = function() {
			if(this.value == '') {
				return;
			}
			// console.log(this.value);
			new AMap.Autocomplete().search(this.value,function(status,data){
				// console.log(data);
				WQ = data.tips[0].location.Q;
				JR = data.tips[0].location.R;
				// console.log(WQ+','+JR);
				btn.onclick = function(){
					map.setCenter([JR,WQ]);
				}
			});
		}
		// 设置级别
		btn_true.onclick = function() {
			map.setZoom(zoom_level.value);
		}

		// 兴趣点搜索
		AMap.service(['AMap.PlaceSearch'], function() {
			btn_interest.onclick = function() {
					new AMap.PlaceSearch({
						type:search_interest.value,//搜索结果的类型
						pageSize:5,//一页显示5条
						pageIndex:2,//默认在第几页显示
						//city:'010',//区号北京区号010
						citylimit:true,//是否强制限制在设定的城市内搜索
						map:map,//展示在哪个地图里
						panel:'content_panel'//放在哪个元素下
						//第一个参数是关键字,第二个是中心点,第三个是范围,第四个是匿名函数
					}).searchNearBy('',[map.getCenter().R,map.getCenter().Q],2000,function() {

					});
				}
		});

		limit_scope.onclick = function() {
			var bounds = map.getBounds();
			map.setLimitBounds(bounds);
		}
		relieve_scope.onclick = function() {
			map.clearLimitBounds();
		}

	</script>
</body>