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

2025-02-27 技术教程

摘要：

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

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

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

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

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

if(cPNum>0){str+='<ulclass="result">';temp.mk=[];for(vari=0;i<cPNum;i++){varpInfo=r.getPoi(i);varmk=newBMap.Marker(pInfo.point);mk.addEventListener('onmouseover',function(){this.setTop(true);});mk.addEventListener('onmouseout',function(){this.setTop(false);})map.addOverlay(mk);varlb=newBMap.Label(pInfo.title,{offset:newBMap.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写上样式：

这样就有现在的样式：

二、接下来是页码显示的部分。

当鼠标点击页码的时候，就获取该页的十条数据。onclick="l_search.gotoPage(i)"

if(pageNum>1){pageStr+='<divclass="pageList">';for(vari=0;i<pageNum;i++){varj=i+1;if(i!=cPage){pageStr+='<ahref="javascript:void(0)"　　　　　　　　　　　　　　　　　onclick="l_search.gotoPage('+i+')">'+j+'</a>'}else{pageStr+=j;}}pageStr+='</div>';}　　　　　　　　　　str+=pageStr;

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/><metaname="description"content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/><title>结果面板样式+制定页码结果</title><linkrel="stylesheet"type="text/css"href="http://api.map.baidu.com/res/11/bmap.css"/><scripttype="text/javascript"src="http://api.map.baidu.com/api?key=67bd734bd2ef5e5ccecfeccbb5a221ee&v=1.1&services=true"></script><style>.rsContent{float:left;width:200px;border:#cccsolid1px;margin-left:5px;display:inline;font-size:12px;line-height:20px;padding:5px;}.rsContentul,.rsContentli{margin:0;padding:0;}.result{}.resultli{list-style-type:none;border-bottom:#cccsolid1px;}.pageList{}.pageLista{margin:05px;}</style></head><body><divid="dituContent"></div><divid="result"class="rsContent"></div></body><scripttype="text/javascript">function$(id){returndocument.getElementById(id);}varmap=newBMap.Map("dituContent");varpoint=newBMap.Point(116.331398,39.897445);map.centerAndZoom(point,12);map.enableScrollWheelZoom();vartemp={};varl_search=newBMap.LocalSearch(map,{onSearchComplete:function(r){map.clearOverlays();varpageNum=r.getNumPages();varcPage=r.getPageIndex();varcPNum=r.getCurrentNumPois();varstr='';varpageStr='';if(cPNum>0){str+='<ulclass="result">';temp.mk=[];for(vari=0;i<cPNum;i++){varpInfo=r.getPoi(i);varmk=newBMap.Marker(pInfo.point);mk.addEventListener('onmouseover',function(){this.setTop(true);});mk.addEventListener('onmouseout',function(){this.setTop(false);})map.addOverlay(mk);varlb=newBMap.Label(pInfo.title,{offset:newBMap.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+='<divclass="pageList">';for(vari=0;i<pageNum;i++){varj=i+1;if(i!=cPage){pageStr+='<ahref="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>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。