快速的基于百度地图的业务对象标注功能实现（存档）

ad8224

1.百度地图示例：http://openapi.baidu.com/map/examples.html
2.百度地图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([  new BMap.Point(120.19034, 30.352165),//世纪华联旁边的边界点  new BMap.Point(120.162017, 30.317527),  new BMap.Point(120.174413, 30.304167),  new BMap.Point(120.161046, 30.294376),  new BMap.Point(120.166436, 30.288389),  new BMap.Point(120.167047, 30.279033),  new BMap.Point(120.163669, 30.278783),  new BMap.Point(120.14768, 30.299989),  new BMap.Point(120.111137, 30.299194),  new BMap.Point(120.107813, 30.320208),  new BMap.Point(120.102153, 30.331695),  new BMap.Point(120.092083, 30.337314),  new BMap.Point(120.096683, 30.339121),  new BMap.Point(120.105423, 30.344015),  new BMap.Point(120.103501, 30.346555),    new BMap.Point(120.112807, 30.349251),  new BMap.Point(120.120748, 30.34361),  new BMap.Point(120.130773, 30.345355),  new BMap.Point(120.129812, 30.342441),  new BMap.Point(120.13513, 30.349009),  new BMap.Point(120.143754, 30.346656),///////////////////////////////////////////////  new BMap.Point(120.133145, 30.383659),  new BMap.Point(120.134439, 30.389329),  new BMap.Point(120.146045, 30.382133),  new BMap.Point(120.156645, 30.383877),  new BMap.Point(120.164298, 30.378051),  new BMap.Point(120.174952, 30.376275),  new BMap.Point(120.18478, 30.382055),  new BMap.Point(120.198614, 30.398285),  new BMap.Point(120.196817, 30.404826),  new BMap.Point(120.203249, 30.404639),  new BMap.Point(120.206555, 30.398565),  new BMap.Point(120.223155, 30.39355),  new BMap.Point(120.216041, 30.382678),  new BMap.Point(120.222365, 30.370122),  new BMap.Point(120.219293, 30.362768),  new BMap.Point(120.206716, 30.355663),  new BMap.Point(120.19034, 30.352165)], {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、对应的项目目录

 6、功能页面