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

示例一：

<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);}//异步调用百度jsfunction 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"><spanclass="Men_text"><imgsrc="${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"><imgsrc="${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"><imgsrc="${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><!-- οnclick="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><divstyle="clear:both;width: 100%; height: 5%; background: #171717; text-align: center; float: left; line-height: 35px;"><a class="aa">关于我们</a><a class="aa">联系我们</a><aclass="aa">隐私权和使用条例</a><a class="aa">服务</a><aclass="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)                            ); }   //从这里写新的Jsonfor (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)                            ); }    }//异步调用百度jsfunction 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条的时候，加载相对应的图片即可。
   
   分页和后台的交互这里……

转载于:https://www.cnblogs.com/elves/p/4482893.html

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

  1. 百度地图自定义标注点

    百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...

  2. 地图标注源码 php,jQuery百度地图自定义标注信息代码

    jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...

  3. 百度地图自定义吹出框

    2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框 直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...

  4. android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...

    本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...

  5. android百度地图画圆,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...

    本文将带你了解Android应用开发android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): 1 ...

  6. 百度地图自定义覆盖物，在手机上无法监听click事件

    百度地图自定义覆盖物,在手机上无法监听click事件 最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...

  7. 百度地图自定义标点。

    百度地图自定义标点. 多个标点方法 可以进行for循环 进行动态标点. <!DOCTYPE html> <html> <head><meta http-equ ...

  8. 百度地图自定义信息窗口样式

    在项目中,UI经常会把信息窗口做自定义设计,那么如何实现自定义样式的信息窗口呢.核心代码如下: /** 创建信息窗口* */function _createMapvInfoWindow(width,h ...

  9. 百度地图自定义图标icon 添加本地图片无法显示问题解决

    百度地图自定义图标icon 添加本地图片无法显示问题解决 我们在阿里巴巴矢量库找的icon 保存到本地 结论 我们在阿里巴巴矢量库找的icon 保存到本地 链接: 阿里巴巴矢量库. 图片: 随便找一个 ...

最新文章

  1. Java | kotlin 手动注入bean，解决lateinit property loginService has not been initialized异常
  2. 贝叶斯厉害在哪里，相当牛的文章
  3. 工厂方法（Factory Method）模式
  4. UPS技术培训系统方案
  5. 线性方程组 python_线性方程组的表示 使用Python的线性代数
  6. python最简易入门_零基础入门python，用最简单的方式即可入门python，没有那么复杂...
  7. webserver之处理HTTP请求
  8. C++中XML的读写操作（生成XML 解析XML）
  9. jdbc oracle 函数,Oracle系列：（33）JDBC访问Oracle的存储过程和存储函数
  10. matlab 画点标号,学习笔记（四）——MATLAB画图
  11. 存储器RAM ROM FLASH介绍
  12. SpringBoot使用AOP记录接口操作日志
  13. 世界传说 换装迷宫2 所有人物及所有技能及奖励技能 传说系列各秘奥技和台词
  14. 易观CTO郭炜：开源，不是天才的甜点，而是勤奋者的盛宴
  15. 中国电信php,一个基于中国电信开放应用平台的短信发送函数(PHP版)
  16. 大学生无线耳机怎么选？内行推荐四款高性价比蓝牙耳机
  17. bilibili封面
  18. linux 取得文件行数
  19. 基础篇 | 材质01 | 4种法线
  20. UMLChina建模知识竞赛第3赛季第13轮：SysML和系统工程知识

热门文章

  1. 厉害了大华为， 这一次美国怂了！
  2. windows server 2003 网络操作系统项目教程 特制版
  3. 3d游戏编程（转帖）
  4. 传统产业如何进行数字化转型
  5. js破解 中国国际航空公司登录
  6. mysql数据库所有表合并_mysql数据库如何将表合并我从数据库中倒出表导出后是这样的b 爱问知识人...
  7. 三分搜索--hdu2241 考研路茫茫——早起看书
  8. layui 表格加载动画_巴州动画
  9. 《美团机器学习实践》学习笔记：机器学习中的模型评价指标（二）——回归模型评估
  10. 【信奥赛一本通】 1413：确定进制（详细代码）