【百度地图API】如何调整结果面板的样式?如何获取指定页码的结果?
原文:【百度地图API】如何调整结果面板的样式?如何获取指定页码的结果?
摘要:
1、你是否想自定义查询后,结果面板的显示样式?
2、数据接口每次只返回10条结果,如何取到单独每一页的结果?
---------------------------------------------------------
一、如果自定义结果面板的样式?
我们通过数据接口拿到每一条数据,然后塞到自己想要的html结构里,如下:
if(cPNum > ){ str += '<ul class="result">'; temp.mk = []; for(var i=;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(,-)}); 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:;padding:;} .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 > ){ pageStr += '<div class="pageList">'; for(var i =;i<pageNum;i++){ var j = i+; 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>
【百度地图API】如何调整结果面板的样式?如何获取指定页码的结果?的更多相关文章
- Android通过百度地图API用Service和Alarm在后台定时获取地理位置信息
本文主要介绍了Android项目集成百度地图API,使用AlarmManager定时调用Service,在Service中请求坐标更新,并通过坐标得到省.市和县三级地理位置信息的方法. 程序结构很简单 ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板?
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 百度地图api的覆盖物样式与bootstrap样式冲突解决办法
使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
- 百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
- 百度地图API开发指南
简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...
- 百度地图API使用介绍
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
- H5微信通过百度地图API实现导航方式一
根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
随机推荐
- 安卓培训第五天---上传文件SD卡
有关如何将文件上传到先说说SD卡: package com.example.lesson05_02; import java.io.File; import java.io.FileNotFoundE ...
- [原创].NET 业务框架开发实战之八 业务层Mapping的选择策略
原文:[原创].NET 业务框架开发实战之八 业务层Mapping的选择策略 .NET 业务框架开发实战之八 业务层Mapping的选择策略 前言:在上一篇文章中提到了mapping,感觉很像在重新实 ...
- 房费制 它 结账BUG
声明:以下内容仅仅是对在桌子上的卡与卡表的后面,适合学生的表! 最近,我们已经开始做VB.NET系统重构版,在这里跟大家聊聊我在机房收费系统中发现的漏洞. 在机房收费系统中有这样一个窗口--结 ...
- 第三章——使用系统函数、存储过程和DBCC SQLPERF命令来监控SQLServer(3)
原文:第三章--使用系统函数.存储过程和DBCC SQLPERF命令来监控SQLServer(3) 本文为这个系列最后一篇.将是如何使用DBCC命令来监控SQLServer日志空间的使用情况. 前言: ...
- Unity3d 实时折射和反射
这里只是张贴在实时折射和脚本反思shader, 大约NGUI第一部分请下载. 这个版本的主要缺点是折射平面部Layer必须是water层.假设有专家谁可以摆脱这一个.请记得把代码回该条,谢谢! Wat ...
- 颜色(color)转换为三刺激值(r/g/b)(干股)
//颜色转换 ##665522 - 三色值 + (UIColor *)setFontColorWithString:(NSString *)color { NSString *cString ...
- ruby 删除文件夹(包括文件夹中的文件夹和文件)
def deleteDirectory(dirPath) if File.directory?(dirPath) puts "是文件夹"; Dir.foreach(dirPath) ...
- ubuntu初学成长记录
在说正事以前,我只想说,我在网上找的很多的命令都已经过时了,并不能用,比如有些人说查看版本信息要用”gcc --version“,然而却是用”gcc -v"......... 1.使用GCC ...
- C++的感想
C++的感想 大学期间,学了一学期的C语言,当然包括学习数据结构时,用的也是C语言.当时刚刚接触计算机,对于编程更是一无所知.上课学习学习,偶尔会照着书上敲一下代码.大二下学期,就丢掉了不用了.最近由 ...
- Android Studio常见报错及处理办法
在Android Studio上点了update,系统自动升级,自动重启Android Studio后,以前的项目Gradle正常编译: Unable to start the daemon proc ...