上一篇博客简单写了一下百度地图如何进行描点,这里介绍一下工作中的要求。
工作需求
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()则不显示数据,具体区别可以去百度一下看看。
JS代码
<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条的时候,加载相对应的图片即可。
分页和后台的交互这里就不论述了。如果有需要的话可以下方留言即可,毕竟楼主好人嘛。项目放到了网盘里面,还是不懂的话,再问我就行百度地图
总结:
这个地图相比较前一篇来说更符合项目需要,正如周贺说的:我们这是一个定制的地图。刚开始研究的时候觉得很难,不过经过一些取巧的办法也算实现了,不过很多东西还可以再封装一下。实习是一次很好的锻炼机会,它让我们接触新东西的时候也认识到自己的不足,这样在结束实习的时候才能有更多的动力来解决内部的不足。