百度地图基于某个城市景点的查找截取列表

最新推荐文章于 2023-12-04 22:09:51 发布

ISSKIN

最新推荐文章于 2023-12-04 22:09:51 发布

阅读量936

点赞数

分类专栏： JQ的坑文章标签：百度地图

本文链接：https://blog.csdn.net/u013354696/article/details/73121551

版权

JQ的坑专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!-- 百度地图 -->
<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
    #l-map{height:300px;width:100%;}
    #r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度的开发钥匙"></script>
<!-- 百度地图 -->
<script>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(108.357219,22.815946), 11);
    var first = 0;
    var maxPage = 0;
    var local = new BMap.LocalSearch(map, {
        pageCapacity:5,
          onSearchComplete: function(results){  
//                  result = results;
                    maxPage = results.getNumPages();
//                      console.log(maxPage +'  最大分页数' + typeof maxPage);
                    /* console.log("1"+results.getPageIndex());//当前页数
                console.log("3"+results.getNumPages());//总页数
                    console.log("4"+results.getNumPois());//总条数
                console.log("5"+results.getPoi(3));// */
                    var s = [];
                    if(typeof results['getCurrentNumPois'] != 'undefined'){
                        for (var i = 0; i < results.getCurrentNumPois(); i ++){    
                            s.push(results.getPoi(i).title + "<br/>"+results.getPoi(i).address);                    
                        }   
                        setDom(s);
                        pages(results.getPageIndex() - 1,results.getPageIndex() + 1);
//                      local.gotoPage(results.getPageIndex() + 1);//下一页
                    } 
//                  document.getElementById("r-result").innerHTML += s.join('<br>');
          }

    }); 

此处为南宁周边的建筑查找

将查询的数据展示
function setDom(arr){
        var str = '';
        var ss=[];
        for(var n in arr){
            ss =arr[n].split("<br/>");
            str +="<a href='xzkhjl.action?adname="+ss[0]+"&ad="+ss[1]+"'>";
            str +="<div class='mq_ad_r' style='float:none;font-size:16px;'>"+arr[n]+"</div><br>";
            str +="</a>";
        }
        document.getElementById("r-result").innerHTML = str;
    }

分页效果
function pages(prev,next){
        prev = prev < 0?0:prev;
        next  = next < maxPage?next:maxPage -1;
        var doms = document.getElementById("page");
        var str = '<span page="0">首页</span>  '+
                   '  <span page="'+prev+'">上一页</span> '+
                   '  <span page="'+next+'">下一页</span> '+
                   '  <span page="'+(maxPage - 1)+'">尾页</span> ';
        doms.innerHTML = str;
    }

分页事件
$(document).on('click','#page > *',function(){
            var page = $(this).attr('page');
            page = parseInt(page);
            local.gotoPage(page);
        });     



local.search('民生银行');

查询民生银行的信息

页面显示

    <div id="r-result"></div> 
                 <div class="xt_t" id="page"></div> 
          <div id="l-map" style="display:none;"></div>

百度地图思路

滚动条位置判定后执行地图信息刷新

$(function(){
        window.onscroll=function(){
            var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight;
            var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
            var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;
            if(a+b==c){
                thisPage < maxPage && local.gotoPage(thisPage + 1);
            }
        }
    })