实现51Map地图接口

51Map免费提供了地图接口以下是调用接口并且实现地理位置标注，存储,修改和回显功能。
51地图网址：http://api.51ditu.com/

在网页中引入

<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>

在地图上标注：

 	//地图标注
	$(document).ready(function(){
		var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
		var map=new LTMaps("mapdiv");//地图对象
		var controlB;		//标记控件
		map.centerAndZoom("tianjin",5);//天津
		map.handleMouseScroll();//鼠标滚轮
		var controlZoom = new LTStandMapControl();//缩放控件
		map.addControl( controlZoom );
		controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮
		controlB.setVisible(false);
		document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
		map.addControl( controlB );
		LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
	})

	//添加标注时执行此函数
	function getPoi(controlB){
		var poi = controlB.getMarkControlPoint();
		$("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置
		$("#y").val(poi.getLatitude());
	}

<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
								<div align="center" style="margin: 12px;">
								<a	href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
									style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a>
								</div>
							</div>

在读图上回显标注：

	//地图回显
	$(document).ready(function(){
		map("mapdiv");
	})
	//地图
	function map(div){
		var map=new LTMaps(div);//地图对象
		var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
	 	map.handleMouseScroll();//鼠标滚轮缩放
	    map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
		map.addOverLay(marker)	//添加标注到地图上
	}

修改地图上的标注：

	//地图回显
	$(document).ready(function(){
		map("mapdiv");
	})
	//地图
	function map(div){
		var map=new LTMaps(div);//地图对象
		var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
	 	map.handleMouseScroll();//鼠标滚轮缩放
	    map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
		map.addOverLay(marker)	//添加标注到地图上
		var controlZoom = new LTStandMapControl();
		map.addControl( controlZoom );
		//添加标注控件并把事件绑定到按钮
		var controlB = new LTMarkControl();//标记控件
		controlB.setVisible(false);
		document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
		map.addControl( controlB );
		LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
	}
	//添加标注时执行此函数
	function getPoi(controlB){
		var poi = controlB.getMarkControlPoint();
		$("#x").val(poi.getLongitude());
		$("#y").val(poi.getLatitude());
	}

其他参数设置：
可以自定义标注图标样式

var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//创建图标对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});