                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /如何使用高德JS-API进行基于LBS的开发

求参考代码

文翰弟

2015-04-10

源自：如何使用高德JS-API进行基于LBS的开发 4-1

关注问题我要回答

1230

操作

收起

2 回答

夜夜被帅醒
2016-05-18

一个小demo，希望对你有帮助

0 回复有任何疑惑可以回复我~

收起回答

夜夜被帅醒
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" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <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>