溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
摘要：
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" />
<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 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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
