摘要:
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-->
</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 = '';
str += '</ul>';
pageStr += '<a href = "javascript:void(0)" onclick="l_search.gotoPage('+i+')">' + j + '</a>'
str += pageStr;
l_search.search("1");
</script>
</html>