                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /如何使用高德JS-API進(jìn)行基于LBS的開發(fā)

求參考代碼

文翰弟

2015-04-10

源自：如何使用高德JS-API進(jìn)行基于LBS的開發(fā) 4-1

關(guān)注問題我要回答

1255

操作

收起

2 回答

夜夜被帥醒
2016-05-18

一個小demo，希望對你有幫助

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

夜夜被帥醒
2016-05-18

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<meta?name="viewport"?content="initial-scale=1.0,?user-scalable=no,?width=device-width">
????<title>周邊美食</title>
????<link?rel="stylesheet"?/>
????<script?src="http://cache.amap.com/lbs/static/es5.min.js"></script>
????<script?src="http://webapi.amap.com/maps?v=1.3&key=5dd7e98927689a522f9965c54f7776fd"></script>
????<script?type="text/javascript"?src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
????
????
<style>
	body{width:100%;height:100%margin:0;font-family:"微軟雅黑";}
	#map{width:100%;height:100%;}
	#show{width:400px;height:400px;position:absolute;z-index:160;background-color:#FFF;top:20%;left:20%;border-radius:5px;opacity:0.9;}
	.mar_top15{margin-top:15px;}
	.item_num{text-align:center;color:#FFF;margin-left:20px;}
	.item_num:nth-child(1){background-color:#F03;width:70px;border-radius:35px;}
	.item_1{height:70px;line-height:70px;}
	.item_num:nth-child(2){background-color:#990;width:60px;border-radius:30px;margin-left:25px;}
	.item_2{height:60px;line-height:60px;}
	.item_num:nth-child(3){background-color:#9C3;width:50px;border-radius:25px;margin-left:30px;}
	.item_3{height:50px;line-height:50px;}
	.item_num:nth-child(4){background-color:#3C0;width:40px;border-radius:20px;margin-left:35px;}
	.item_4{height:40px;line-height:40px;}
	.item_num:nth-child(5){background-color:#00F;width:30px;border-radius:15px;margin-left:40px;}
	.item_5{height:30px;line-height:30px;}
	.fl{float:left;}
	.fr{float:right;}
	#item_menu{width:100px;}
	#item_list{width:295px;}
	
	
</style>
</head>

<body>
<div?id="map"></div>
	<div?id="show">
????	<div?id="item?menu"?class="fl">
????????	<div?class="item_num?item_1?mar_top15">1</div>
????????????<div?class="item_num?item_2?mar_top15">2</div>
????????????<div?class="item_num?item_3?mar_top15">3</div>
????????????<div?class="item_num?item_4?mar_top15">4</div>
????????????<div?class="item_num?item_5?mar_top15">5</div>??????
????????</div>
????
????	<div?id="item_list"?class="fr">
????
????	</div>
	</div>
<script?type="text/javascript">
(function(){
	var?map=new?AMap.Map('map');
	var?items=[];
	map.setZoom(14);
	map.plugin(['AMap.PlaceSearch'],function(){
		var?pl=new?AMap.PlaceSearch(
		{
			extensions:'all'
			});
		//pl.searchNearBy('餐廳',map.getCenter(),3000);
		pl.search('798');
		AMap.event.addListener(pl,'complete',function(e){
			console.log(e);
			var?pois=e.poiList.pois;
			var?n=pois.length>5?5:pois.length;
			for(var?i=0;i<n;i++)
			{
				items.push(pois[i]['name']);
				}
				new?Render(items).showUI();
			});
		
		});
		
	var?Render=function(items){
		this.items=items;
		this.list=document.getElementById('item_list');
		
		};
		Render.prototype={
			_addItem:function(data,i){
				var?el=document.createElement('div');
				el.className='mar_top15?item_'+i;
				el.innerHTML=data;
				this.list.appendChild(el);
				},
				showUI:function(items){
					for(var?i=0,n=(this.items.length>5?5:this.items.length);i<n;i++){
						this._addItem(this.items[i],i+1);
						}
					
					
					}
				
				
				};
		
		
		
	
	
	
	})();

</script>
</body>
</html>