快速的基于百度地图的业务对象标注功能实现（存档）
1.百度地图示例：http://openapi.baidu.com/map/examples.html2.百度地图API：http://openapi.baidu.com/map/classReference.html
根据学习过程，通过示例结合API来学习，是比较快的一种方式。
过程：
1、新建map.jsp，例如可通过iframe把地图页面嵌入到业务系统中
2、在页面head中引入百度地图脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true"> 3、新建JSP页面,在body中加入两个DIV层，用于显示地图和标记按钮
<div style="width:100%;height:99%;border:1px solid gray" id="container"></div><div id="floatId" style="z-index: 9998; position: absolute; width: 150px; display: block; height: 20px; word-break: break-all; top: 10px; right: 0px;" classNAme="bder_color3"><input type="button" value="标注"style="BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid"/></div> 4、地图操作函数，如果业务对象已经有在地图上标注过，要传入的参数有标注状态、坐标、主键
<script type="text/javascript">//获取地块表单的参数和URL的主键IDvar land_ismarke = parent.parent.document.getElementById("land_ismarke").value;var land_x = parent.parent.document.getElementById("land_x").value;var land_y = parent.parent.document.getElementById("land_y").value;var unid = parent.ucapCommonFun.getUrlParameter("unid");//初始化地图参数var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(120.148542, 30.325866); // 创建点坐标map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。map.enableScrollWheelZoom(); // 启用滚轮放大缩小。map.enableKeyboard(); // 启用键盘操作。map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件map.addControl(new BMap.ScaleControl()); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件//初始化**区边界点数据 add 2011-04-15 wzlvar polyline = new BMap.Polyline(, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});map.addOverlay(polyline);var initPoint = new BMap.Point(land_x, land_y); // 创建点坐标var initMarker = new BMap.Marker(initPoint); // 创建覆盖物var land_name = parent.parent.document.getElementById("land_name").value; //表单值var land_intro = parent.parent.document.getElementById("land_intro").value; //表单值markCurrentLand(initPoint,initMarker);//初始化，展示地块窗口，并把地图中心位置移动到相应位置/* * 展示地块窗口，并把地图中心位置移动到相应位置 */function markCurrentLand(point,marker){if(land_ismarke=="1"){//已成功标注到地图，显示信息到地图var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+land_name+"</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='images/gongshuRMZFBuilding.jpg' width='139' height='104' title='**区'/>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>用地性质:出让面积:地块介绍:"+land_intro+"</p>" +"</div>";var infoWindow = new BMap.InfoWindow(sContent);// 创建信息窗口对象map.addOverlay(marker); //添加图标setTimeout(function(){map.panTo(point); //移动到当前对象map.openInfoWindow(infoWindow, point); // 打开信息窗口}, 1000);marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindow document.getElementById('imgDemo').onload = function (){ infoWindow.redraw(); }});}}//点击标注，更新当前对象位置，通过UNIDfunction marke(){if(unid==""){parent.Ext.Msg.alert("提示", "请先保存表单！");return;}var myPushpin = new BMap.PushpinTool(map); // 创建标注工具实例myPushpin.open(); //开启标注工具myPushpin.addEventListener("markend", function(e){//添加监听事件,点击标注新地块位置//通过UCAP应用平台，到数据库中更新位置，此处可用其它第三方AJAX框架来更新对象的三个字段值：坐标XY和状态;并返回结果var rs = parent.bdgUtil.synchronization("type=land&act=marke&unid="+unid+"&x="+e.marker.getPoint().lng+"&y="+e.marker.getPoint().lat);if(rs.markes==1){myPushpin.close(); //关闭标注工具map.closeInfoWindow(); //关闭信息窗e.marker.disableMassClear();//禁止覆盖物在map.clearOverlays方法中被清除map.clearOverlays(); //清除地图上所有覆盖物。e.marker.enableMassClear();//允许覆盖物在map.clearOverlays方法中被清除var nowPoint = new BMap.Point(e.marker.getPoint().lng, e.marker.getPoint().lat); // 创建点坐标markCurrentLand(nowPoint,e.marker); //展示地块窗口，并把地图中心位置移动到相应位置//parent.Ext.Msg.alert("提示", "标注成功！");}else{parent.Ext.Msg.alert("提示", "标注失败！");//刷新}});}</script> 5、对应的项目目录
http://dl.iteye.com/upload/attachment/465679/54c6a585-61eb-3a09-aca1-f73b486529f0.jpg
6、功能页面
http://dl.iteye.com/upload/attachment/465701/3a9ac11f-6c56-3816-87bc-0b53a4ab7d50.jpg
页:
[1]