快速的基于百度map的业务对象标注功能实现（存档）
快速的基于百度地图的业务对象标注功能实现（存档）
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="标注" onclick="marke()" 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的主键ID
var 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 wzl
var 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();
}
});
}
}
//点击标注，更新当前对象位置，通过UNID
function 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、功能页面