js中百度地图API获取本地搜索全部结果自定义显示效果

本文介绍如何在JavaScript中使用百度地图API获取本地搜索的全部结果,并实现自定义显示。通过利用LocalSearch的gotoPage方法遍历所有页面,获取并存储每页数据,最终实现对所有搜索结果的个性化展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近碰到一个关于百度地图api的问题:

1、首先我需要获取到一个本地搜索的全部结果;

2、然后需要对获取的结果信息进行读取以及对这些信息的个性化展示

大致操作如下,首先通过result.getNumPois()获取本次搜索全部结果记录数,但是这个结果无法直接全部取到,因为通过getPoi(index)方法只能获取当前页面的几条数据,所以,我们需要考虑如何将当前页面改变,能达到遍历结果所有页面数据的效果,但是很无奈,百度给的api并没有这样的方法。经过千辛万苦,各种百度查询,终于找到一种方式,就是在每次获取一个页面的数据之后,需要使用LocalSearch的gotoPage(PageIndex)重新调处下一页的数据。

大致代码结构如下。

[javascript]  view plain  copy
  1. var local1 = new BMap.LocalSearch(  
  2.             map,  
  3.             {  
  4.                 renderOptions : {  
  5.                     map : map,  
  6.                 // panel : "resultDiv"  
  7.                 },  
  8.                 onSearchComplete : function(results) {  
  9.   
  10.                     // 需要获取当前搜索总共有多少条结果  
  11.                     var totalResults = results.getNumPois();  
  12.   
  13.                       
[javascript]  view plain  copy
  1. var totalPages = results.getNumPages();  
  2. var currPage = results.getPageIndex();// 获取当前是第几页数据  
  3. // alert("totalResults:" + totalResults);  
  4. for (i = 0; i < results.getCurrentNumPois(); i++) {  
  5.   
  6.     //resultArray[50 * currPage + i] = results.getPoi(i);//在当前页面下获取页面中的内容  
  7. }  
  8.   
  9. if (results.getPageIndex() < results.getNumPages() - 1) {  
[javascript]  view plain  copy
  1. <strong><span style="font-size:18px;color:#ff0000;">                        local1.gotoPage(results.getPageIndex() + 1); // 遍历到最后一页之后不再进行下一页搜索,此时,已经获取到全部的搜索结果,  
  2. </span></strong>  
  3.                     } else {// 已经到达最后一页结果  
[javascript]  view plain  copy
  1. alert("全部结果有:" + resultArray.length + "------原本搜索结果有:" + results.getNumPois());  
[javascript]  view plain  copy
  1. //本实例中是要使用resultArray存储所有检索结果,在此else分支对存储的结果数据进行页面展示  
[javascript]  view plain  copy
  1.   
[javascript]  view plain  copy
  1. }  
  2.             },  
  3.   
  4.             pageCapacity : 50  
  5.         });  
  6. local1.searchNearby('景点', pp, 2000);  


在代码片段中,else分支便可以添加自己的处理代码,且能够完全获取到检索的结果,

这样,我可以对检索结果进行布局设置,控制显示格式,添加动作响应等比较复杂的操作。

//注,代码片段无法直接运行,需要根据实际进行修饰才能使用。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值