原文:【百度地图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】如何调整结果面板的样式？如何获取指定页码的结果？的更多相关文章

  1. Android通过百度地图API用Service和Alarm在后台定时获取地理位置信息

    本文主要介绍了Android项目集成百度地图API,使用AlarmManager定时调用Service,在Service中请求坐标更新,并通过坐标得到省.市和县三级地理位置信息的方法. 程序结构很简单 ...

  2. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  3. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  4. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  5. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  6. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  7. 百度地图API使用介绍

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  8. H5微信通过百度地图API实现导航方式一

    根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...

  9. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

随机推荐

  1. 【C语言探索之旅】 第二课：工欲善其事，必先利其器

    内容简介 1.课程大纲 2.第一部分第二课:工欲善其事,必先利其器 3.第一部分第三课预告:你的第一个程序 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C ...

  2. Oracle 初始化参数文件pfile和spfile

    pfile和spfile差额 pfile :Oracle 9i之前.ORACLE使用我们一直PFILE存储的初始化参数,,能够在操作系统级别改动. 当spfile文件改动出现错误导致oracle无法启 ...

  3. 玩转Web之servlet（二）---servlet常见错误

    1>403:tomcat发生错误 2> 404 :意思是服务器依据请求资源路径,找不到对应的资源        解决:1.依据http://localhost:8080/Web工程名/ur ...

  4. .NET应用架构设计—工作单位模式（摆脱程序代码的重要思想，反击DDD）

    阅读文件夹: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单演示样例 4.总结 1.背景介绍 一直都在谈论面向对象开发.可是开发企业应用系统时.使用面向对象开发最大的问题就是在于,多个 ...

  5. 关于“类不能支持Automation操作”错误的解决方法

    一段程序IE上老是提示“类不支持Automation操作”的错误,IE6.7.8都一样,但是Firefox可以,后来网上找到如下解决方法: 重新注册下以下文件,问题便解决了:msscript.ocxd ...

  6. POJ 2112 Optimal Milking （二分 + floyd + 网络流）

    POJ 2112 Optimal Milking 链接:http://poj.org/problem?id=2112 题意:农场主John 将他的K(1≤K≤30)个挤奶器运到牧场,在那里有C(1≤C ...

  7. Codeforces 442B Andrey and Problem(贪婪)

    题目链接:Codeforces 442B Andrey and Problem 题目大意:Andrey有一个问题,想要朋友们为自己出一道题,如今他有n个朋友.每一个朋友想出题目的概率为pi,可是他能够 ...

  8. 与我一起extjs5(09--其定义菜单2)

    跟我一起学extjs5(09--自己定义菜单2)         这一节来定义另外三种类型的菜单类. 首先定义菜单button类.文件放于app/view/main/region文件夹以下,文件名称为 ...

  9. Team Foundation Server 2015使用教程--tfs用户账号切换

  10. andriod 在windows配置环境

    andriod开发环境配置 个人信息:就读于燕大本科软件project专业 眼下大四; 本人博客:google搜索"cqs_2012"就可以; 个人爱好:酷爱数据结构和算法,希望将 ...