【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
生活随笔
收集整理的這篇文章主要介紹了
【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原文:【百度地圖API】如何調(diào)整結(jié)果面板的樣式？如何獲取指定頁碼的結(jié)果？
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>'; ?
//這里略去頁碼顯示部分，只顯示第一頁數(shù)據(jù)。 ?
$('result').innerHTML = str;
}
.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>
pageStr += '<div class="pageList">';
for(var i =0;i<pageNum;i++){
var j = i+1;
if(i != cPage){
pageStr += '<a href = "javascript:void(0)"? οnclick="l_search.gotoPage('+i+')">' + j + '</a>'
}
else{
pageStr += j;
}
}
pageStr += '</div>';
} str += pageStr;
<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>結(jié)果面板樣式+制定頁碼結(jié)果</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)" οnclick="l_search.gotoPage('+i+')">' + j + '</a>'
}
else{
pageStr += j;
}
}
pageStr += '</div>';
}
str += pageStr;
$('result').innerHTML = str;
}
}
});
l_search.search("1");
</script>
</html>
摘要：
1、你是否想自定義查詢后，結(jié)果面板的顯示樣式？
2、數(shù)據(jù)接口每次只返回10條結(jié)果，如何取到單獨每一頁的結(jié)果？
---------------------------------------------------------
一、如果自定義結(jié)果面板的樣式？
我們通過數(shù)據(jù)接口拿到每一條數(shù)據(jù)，然后塞到自己想要的html結(jié)構(gòu)里，如下：
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>'; ?
//這里略去頁碼顯示部分，只顯示第一頁數(shù)據(jù)。 ?
$('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>
這樣就有現(xiàn)在的樣式：
二、接下來是頁碼顯示的部分。
當(dāng)鼠標(biāo)點擊頁碼的時候，就獲取該頁的十條數(shù)據(jù)。οnclick="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)"? οnclick="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>結(jié)果面板樣式+制定頁碼結(jié)果</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)" οnclick="l_search.gotoPage('+i+')">' + j + '</a>'
}
else{
pageStr += j;
}
}
pageStr += '</div>';
}
str += pageStr;
$('result').innerHTML = str;
}
}
});
l_search.search("1");
</script>
</html>
總結(jié)
以上是生活随笔為你收集整理的【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python zipfile 编码问题
- 下一篇： 修改linux命令符和解决命令符太长的问