【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？

摘要：

1、你是否想自定义查询后，结果面板的显示样式？

2、数据接口每次只返回10条结果，如何取到单独每一页的结果？

---------------------------------------------------------

一、如果自定义结果面板的样式？

我们通过数据接口拿到每一条数据，然后塞到自己想要的html结构里，如下：

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> ' ;  

//这里略去页码显示部分，只显示第一页数据。

 
$( ' 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 : 0 ; padding : 0 ; }
.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 > 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;

三、全部源代码如下，点击这里运行。

<! 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 >