原文:【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
摘要：
1、你是否想自定义查询后，结果面板的显示样式？
2、数据接口每次只返回10条结果，如何取到单独每一页的结果？
---------------------------------------------------------
一、如果自定义结果面板的样式？
我们通过数据接口拿到每一条数据，然后塞到自己想要的html结构里，如下：
if(cPNum > ){ str += '<ul class="result">'; temp.mk = []; for(var i=;i<cPNum;i++){ var pInfo = r.getPoi(i); var mk = new BMap.Marker(pInfo.point); mk.addEventListener('onmouseover',function(){ this.setTop(true); }); mk.addEventListener('onmouseout',function(){ this.setTop(false); }) map.addOverlay(mk); var lb = new BMap.Label(pInfo.title,{offset:new BMap.Size(,-)}); mk.setLabel(lb); str += '<li>'+ pInfo.title+'</li>'; temp.mk.push(pInfo.point); } map.setViewport(temp.mk) str += '</ul>';
//这里略去页码显示部分，只显示第一页数据。
$('result').innerHTML = str; }
然后再自己给这些生成的html写上样式：
<style> .rsContent{float:left;width:200px;border:#ccc solid 1px;margin-left:5px;display:inline;font-size:12px;line-height:20px;padding:5px;} .rsContent ul,.rsContent li{margin:;padding:;} .result{} .result li{list-style-type:none;border-bottom:#ccc solid 1px;} .pageList{} .pageList a{margin:0 5px;}</style>
这样就有现在的样式：
二、接下来是页码显示的部分。
当鼠标点击页码的时候，就获取该页的十条数据。onclick="l_search.gotoPage(i)"
if(pageNum > ){ pageStr += '<div class="pageList">'; for(var i =;i<pageNum;i++){ var j = i+; if(i != cPage){ pageStr += '<a href = "javascript:void(0)"
onclick="l_search.gotoPage('+i+')">' + j + '</a>' } else{ pageStr += j; } } pageStr += '</div>'; }
str += pageStr;
三、全部源代码如下，点击这里运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" /><meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" /><title>结果面板样式+制定页码结果</title><!--引用百度地图API--><link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/11/bmap.css"/><script type="text/javascript" src="http://api.map.baidu.com/api?key=67bd734bd2ef5e5ccecfeccbb5a221ee&v=1.1&services=true"></script><!--script type="text/javascript" src="http://wxp.baidu.com/bugxiufu/api/api.js"></script--><style> .rsContent{float:left;width:200px;border:#ccc solid 1px;margin-left:5px;display:inline;font-size:12px;line-height:20px;padding:5px;} .rsContent ul,.rsContent li{margin:0;padding:0;} .result{} .result li{list-style-type:none;border-bottom:#ccc solid 1px;} .pageList{} .pageList a{margin:0 5px;}</style></head><body> <!--百度地图容器--> <div style="width:597px;height:550px;border:#ccc solid 1px;float:left;" id="dituContent"></div> <div id="result" class="rsContent"></div> </body><script type="text/javascript"> function $(id) { return document.getElementById(id); } var map = new BMap.Map("dituContent"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); map.enableScrollWheelZoom(); var temp = {}; var l_search = new BMap.LocalSearch(map,{ onSearchComplete : function(r){ map.clearOverlays(); var pageNum = r.getNumPages(); var cPage = r.getPageIndex(); var cPNum = r.getCurrentNumPois(); var str = ''; var pageStr = ''; if(cPNum > 0){ str += '<ul class="result">'; temp.mk = []; for(var i=0;i<cPNum;i++){ var pInfo = r.getPoi(i); var mk = new BMap.Marker(pInfo.point); mk.addEventListener('onmouseover',function(){ this.setTop(true); }); mk.addEventListener('onmouseout',function(){ this.setTop(false); }) map.addOverlay(mk); var lb = new BMap.Label(pInfo.title,{offset:new BMap.Size(10,-20)}); mk.setLabel(lb); str += '<li>'+ pInfo.title+'</li>'; temp.mk.push(pInfo.point); } map.setViewport(temp.mk) str += '</ul>'; if(pageNum > 1){ pageStr += '<div class="pageList">'; for(var i =0;i<pageNum;i++){ var j = i+1; if(i != cPage){ pageStr += '<a href = "javascript:void(0)" onclick="l_search.gotoPage('+i+')">' + j + '</a>' } else{ pageStr += j; } } pageStr += '</div>'; } str += pageStr; $('result').innerHTML = str; } } }); l_search.search("1");</script></html>