百度地图 自定义结果面板+分页+图层标注(标注点+搜索)

示例一：

 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F5dadeb87de65231081fe88229c124e2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />    
    <style type="text/css">
        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}        
        #r-result{width:20%;height:90%}
        #map{height:100%;width:79.9%;}
    </style>
</head>
<body>
        <div>
            <input type="text" onkeypress="EnterPress()" style="width:16%;height:25px" id="txtContent">
            <input type="button" style="width:50px;height:25px" id="search" value="搜索" onclick="searchMap()"/>
        </div><br>
        <div>
            <div id="r-result" style="width:20%;float:left"></div>
            <div style="width:79.9%;float:right;" id="map"></div>
        </div>
</body>
</html>
            <script type="text/javascript">
                var markerArr = [
                    { title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },
                    { title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },
                    { title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },
                    { title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }

                ];

                function map_init(e) {
                    var map = new BMap.Map("map"); // 创建Map实例
                    var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小
                    //地图、卫星、混合模式切换
                    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
                    //向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    map.addControl(ctrlNav);

                    //向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    map.addControl(ctrlOve);

                    //向地图中添加比例尺控件
                    //var ctrlSca = new window.BMap.ScaleControl({
                      //  anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    //});
                   // map.addControl(ctrlSca);

                    var point = new Array(); //存放标注点经纬信息的数组
                    var marker = new Array(); //存放标注点对象的数组
                    var info = new Array(); //存放提示信息窗口对象的数组
                    var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0]; //
                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                        marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                        map.addOverlay(marker[i]);
                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
                        //marker[i].setLabel(label);

                        // 创建信息窗口对象
                        info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>";
                        //创建百度样式检索信息窗口对象                       
                        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                                title  : markerArr[i].title,      //标题
                                width  : 290,             //宽度
                                height : 55,              //高度
                                panel  : "panel",         //检索结果面板
                                enableAutoPan : true,     //自动平移
                                searchTypes   :[
                                    BMAPLIB_TAB_SEARCH,   //周边检索
                                    BMAPLIB_TAB_TO_HERE,  //到这里去
                                    BMAPLIB_TAB_FROM_HERE //从这里出发
                                ]
                            });
                        //添加点击事件
                        marker[i].addEventListener("click", 
                            (function(k){
                                // js 闭包
                                return function(){
                                    //map.centerAndZoom(point[k], 18);
                                    //marker[k].openInfoWindow(info[k]);
                                    searchInfoWindow[k].open(marker[k]);
                                }
                            })(i)                            
                        ); 
                    }                  
                    
                    var local = new BMap.LocalSearch(map, {
                        renderOptions: {map: map, panel: "r-result"}
                    });
                    local.search(e);
                }
                //异步调用百度js
                function map_load() {
                    var load = document.createElement("script");
                    load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
                    document.body.appendChild(load);
                }
                //按输入的内容进行搜索
                function searchMap(){
                     var content=document.getElementById("txtContent").value;
                     map_init(content);
                }
                //键盘回车事件
                function EnterPress(){ 
                    if(event.keyCode == 13){ 
                        searchMap(); //调用输入框搜索事件
                    } 
                } 
                window.onload = map_load;
            </script>

 

 

示例二：

     52个市场注册的时候可以填写经纬度来标注地理位置，这样后台就可以拿到这些地理位置进行描点标注。显示到前台的时候要显示到左侧栏，并将这些结果进行 分页显示。如果每页显示10条的话，这10条要以红色ABC来显示，剩余42个市场要以粉色的标注显示，并且点击这些标注要能直接定位。

     最后的成型图是这样的：

 

     

 做法很简单，步骤如下：

    1.根据数据库中的经纬度描点，经纬度在后台可以通过转换json放到action上下文，前台用隐藏标签来绑定该值。我在这里是有两个放到上下文中，一个是当前10页，一个是后面的42个;

    2.左边是一个Table，绑定的是当前10页的值，根据分页来传递参数获取值绑定到前台隐藏控件中；

    3.组合起来就是上面的地图显示。

前台html代码

    <body onload="map_init()">
        <div style="width: 100%; height: 100%">
            <div class="head_top" style="width: 100%; height: 7%; margin: 0px;">

                <div class="head">
                    <div class="hd_logo">
                        <img style="padding-top: 13px; margin-left:-260px;padding-right:200px;"
                            src="${pageContext.request.contextPath}/images/hl_logo.png"
                            width="402" height="24" align="left" />
                    </div>
                    <div class="hl_menu">
                        <ul>
                            <li>
                                <a href="factoryTicketNumber_home.action"><span
                                    class="Men_text"><img
                                            src="${pageContext.request.contextPath}/images/home.png"
                                            width="13" height="11" align="middle" /> 首页</span>
                                </a>
                            </li>
                            <li  class="active">
                                <a href="market_testmap.action"><span class="Men_text"><img
                                            src="${pageContext.request.contextPath}/images/dt2.png"
                                            width="11" height="15" align="middle" /> 地图</span>
                                </a>
                            </li>
                            <li>
                                <a href="purchaseinfoAction_publicdailyTrading.action"><span class="Men_text"><img
                                            src="${pageContext.request.contextPath}/images/gwc.png"
                                            width="13" height="11" align="middle" /> 每日交易</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
            <div id="r-result"
                style="overflow-y: scroll; width: 19.9%, height:80%; float: left">
                <form action="market_testmap.action" method="post">
                    <table class="table table-bordered table-striped" height="80%"
                        style="border-collapse: collapse; border: none; font-size: 13px">
                        <tbody id="TableData" class="dataContainer" datakey="factoryList">
                            <s:iterator value="recordList" id="list" status="status">
                                <tr class="TableDetail1 template">
                                    <td style="padding: 5px 10px;">
                                        <div>
                                            <img height="25px"
                                                src="${pageContext.request.contextPath}/images/mapimage/${status.count}.png" />
                                            <a href="#" value="${list[0]}" onclick="showInfoWindow(this)">${list[0]}</a>
                                            <!-- onclick="searchName(this) -->
                                        </div>
                                        <div>
                                            地址：${list[1]}
                                        </div>
                                        <div>
                                            电话：${list[3]}
                                        </div>
                                    </td>
                                </tr>
                            </s:iterator>
                        </tbody>
                    </table>
                </form>
                <%@ include file="/WEB-INF/common/pageViewMap.jspf"%>
            </div>
            <div style="width: 80%, height :   80%; float: right;" id="map"></div>
            <div style="clear:both">    
                <input type="hidden" id="txtContent">
                <s:hidden name="mapValue" id="mapValue" />
                <s:hidden name="mapOtherValue" id="mapOtherValue" />
            </div>
            <div
                style="clear:both;width: 100%; height: 5%; background: #171717; text-align: center; float: left; line-height: 35px;">
                <a class="aa">关于我们</a><a class="aa">联系我们</a><a
                    class="aa">隐私权和使用条例</a><a class="aa">服务</a><a
                    class="aa">反馈</a>
            </div>
        </div>
    </body>

这里在<body>标签中用onload事件，这样可以在dom加载成功后加载JS事件，可以绑定到隐藏控件的值。$().ready()则不显示数据，具体区别可以去百度一下看看。

<script type="text/javascript">
    function gotoPage( pageNum ){
        $(document.forms[0]).append("<input type=\'hidden\' name=\'pageNum\' value=\'" + pageNum +"\'/>");
        document.forms[0].submit();
    }
    
     function map_init(e) {
           var markerArr = document.getElementById("mapValue");  //这里是当前页的 Json
        markerArr =eval(markerArr.value);
        
        var markerArrOther =document.getElementById("mapOtherValue"); //这里获取的是剩余的 地图Json 
        markerArrOther =eval(markerArrOther.value);
        
        var map = new BMap.Map("map"); // 创建Map实例
        var point = new BMap.Point(116.302771, 39.963603); //地图中心点，海淀区 
        map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        //地图、卫星、混合模式切换
        map.addControl( new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);
        
        //添加全景 控件 
           var stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(40, 40));
        map.addControl(stCtrl);//添加全景控件
                
        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

        var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        var info = new Array(); //存放提示信息窗口对象的数组
        var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
        
        var pointOther =new Array(); //同上 一样，只不过这里是剩余的查看 Json数组
        var markerOther =new Array();
        var infoOther =new Array();
        var searchInfoWindowOther =new Array();
        
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].longitude; //
            var p1 = markerArr[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            
            var iconImg = new BMap.Icon(\'${pageContext.request.contextPath}/images/mapimage/\'+(i+1)+\'.png\', new BMap.Size(32, 47), {  
                anchor: new BMap.Size(10, 30) 
            });      
         marker[i] = new window.BMap.Marker(point[i],{icon:iconImg}); //按照地图点坐标生成标记
         map.addOverlay(marker[i]);
         var label = new window.BMap.Label(markerArr[i].name, { offset: new window.BMap.Size(20, -10) });

           // 创建信息窗口对象
           info[i] = \'<p style="width:280px;margin:0;line-height:20px;">市场名称：\' + markerArr[i].name  + \'</br>地址：\' + markerArr[i].address + \'</br> 电话：\' + markerArr[i].contactPhone + \'</p>\';
           //infoOther[i] = \'<p style="width:280px;margin:0;line-height:20px;">市场名称：\' + markerArrOther[i].name  + \'</br>地址：\' + markerArrOther[i].address + \'</br> 电话：\' + markerArrOther[i].contactPhone + \'</p>\';
           
           //创建百度样式检索信息窗口对象                       
           searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                   title  : markerArr[i].name,      //标题
                   width  : 290,             //宽度
                   height : 55,              //高度
                   panel  : "panel",         //检索结果面板
                   enableAutoPan : true,     //自动平移
                   searchTypes   :[
                       BMAPLIB_TAB_SEARCH,   //周边检索
                       BMAPLIB_TAB_TO_HERE,  //到这里去
                       BMAPLIB_TAB_FROM_HERE //从这里出发
                   ]
               });
               //判断当前点击的是否有数据 
               if(e!="" && e==  markerArr[i].name ){
                       searchInfoWindow[i].open(marker[i]);
               }
             //添加点击事件
             marker[i].addEventListener("click", 
                 (function(k){
                     // js 闭包
                     return function(){
                         searchInfoWindow[k].open(marker[k]);
                     }
                 })(i)                            
             ); 
         }   
         //从这里写新的Json
        for (var i = 0; i < markerArrOther.length; i++) {
            var p0 = markerArrOther[i].longitude; //
            var p1 = markerArrOther[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            pointOther[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            
            var iconImgOther = new BMap.Icon(\'${pageContext.request.contextPath}/images/mapimage/11.png\', new BMap.Size(20, 30), {  
                anchor: new BMap.Size(10, 30) 
            });
         markerOther[i] = new window.BMap.Marker(pointOther[i],{icon:iconImgOther}); //按照地图点坐标生成标记
         map.addOverlay(markerOther[i]);
         var labelOther = new window.BMap.Label(markerArrOther[i].name, { offset: new window.BMap.Size(20, -10) });
           // 创建信息窗口对象
         infoOther[i] = \'<p style="width:280px;margin:0;line-height:20px;">市场名称：\' + markerArrOther[i].name  + \'</br>地址：\' + markerArrOther[i].address + \'</br> 电话：\' + markerArrOther[i].contactPhone + \'</p>\';
   

            //创建百度样式检索信息窗口对象                       
           searchInfoWindowOther[i] = new BMapLib.SearchInfoWindow(map, infoOther[i], {
                   title  : markerArrOther[i].name,      //标题
                   width  : 290,             //宽度
                   height : 55,              //高度
                   panel  : "panel",         //检索结果面板
                   enableAutoPan : true,     //自动平移
                   searchTypes   :[
                       BMAPLIB_TAB_SEARCH,   //周边检索
                       BMAPLIB_TAB_TO_HERE,  //到这里去
                       BMAPLIB_TAB_FROM_HERE //从这里出发
                   ]
               });
             //添加点击事件
             markerOther[i].addEventListener("click", 
                 (function(k){
                     // js 闭包
                     return function(){
                         searchInfoWindowOther[k].open(markerOther[k]);
                     }
                 })(i)                            
             ); 
        
        }    
                          
    }
        //异步调用百度js
        function map_load() {
           var load = document.createElement("script");
           load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
           document.body.appendChild(load);
       }
    
        //显示信息弹框 
        function showInfoWindow(obj){
            var a = $(obj).attr(\'value\');
            document.getElementById("txtContent").value=a;
            map_init(a);
        }

</script>

JS中加载的图片标注是提前将图片设置为1，2…这些数字，当循环的当前10条的时候，加载相对应的图片即可。
   
   分页和后台的交互这里……

版权声明：本文为elves原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/elves/p/4482893.html