51地图 API 应用例子

<script type="text/javascript">
	var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
	var map;//地图对象
	var i=-1;	//判断序号
	var pointsR=new Array();	//存放点
	var title=new Array();	//存放描述
	var markers=[];	//存放标记
	var controlB;		//标记控件
	var positionIds=[]; //存放返回的Id
	
	$(document).ready(function (){
		map=new LTMaps("map");
		//鼠标滚轮
		map.handleMouseScroll();
		//缩放控件
		var controlZoom = new LTStandMapControl();
		map.addControl( controlZoom ); //把控件加入到地图对象
		//添加标注控件并把事件绑定到按钮
		controlB = new LTMarkControl(ico);
		controlB.setVisible(false);
		document.getElementById("add").onclick=function (){controlB.btnClick()};
		map.addControl( controlB );
		LTEvent.addListener( controlB , "mouseup" , getPoi );
//如果有我的地点初始值，则load否则以天津为初始
		<c:if test="${noPosition=='false'}">
			load();
		</c:if>
		<c:if test="${noPosition!='false'}">
			//天津
			map.centerAndZoom("tianjin",5);
		</c:if>
	});

//添加标注时执行此函数
		function getPoi(){
			$("#divDialog").html("请输入地名：<input id='positionId' type='text' maxlength='300' style='width:360px;'>");
        	 $("#divDialog").btnPrompt({title:"",callback: function(){addPositionDo();$("#divDialog").close()}});
		}
	function addPositionDo(){
			var description = $("#positionId").val();
			if(description==''){
				alert("地名不能为空");
				return false;
			}else{
				var poi = controlB.getMarkControlPoint();
				$.post("<c:url value='/user/user/personal.ao?method=updatePosition' />",
				{ x: poi.getLongitude(), y: poi.getLatitude(),title:description },
				 function(json){
				  positionIds[++i]=json["positionId"];
				  pointsR[i]=(new LTPoint(poi.getLongitude(),poi.getLatitude()));
				title[i]=description;
				markers[i] = new LTMarker(new LTPoint(poi.getLongitude(),poi.getLatitude()),ico);
				map.addOverLay(markers[i]);
				//消除api标注
				controlB.btnClick();  
				controlB.btnClick();
				show();
				//给标记添加点击事件
				LTEvent.addListener( markers[i] , "mouseover" , function(){
					this.openInfoWinHtml(title[$.inArray(this,markers)])
				});
				}); 
			return true;
			}
	}
 	//在层里显示结果
	function show(){
		var result="<ul>";
		for(var i=0;i<pointsR.length;i++)
		{
			result+= "<li value='"+i+
			"' onmouseover='showMess(this)'><a class='link_blue' href='javascript:void(0)' >"+
			title[i]+"</a>";
			result+="<span onclick='del(\""+i+"\");return false;'>删除</span></li>";
		}
		result+="</ul>"
		document.getElementById("result").innerHTML=result;
	}
	
	//删除标记
	function del(index){
		if(confirm("是否要删除?"))  
		{
		$.post("<c:url value='/user/user/personal.ao?method=deletePosition&' />",
				{ id:positionIds[index] },
				 function(json){
			map.removeOverLay( markers[index],true);
			pointsR.splice(index,1);
			title.splice(index,1);
			markers.splice(index,1);
			i--;
			show();});
		}
	}
	
	function load(){
	var jsons=eval('${userForm.positionList}');
		for(var j=0;j<jsons.length;j++){
		var json=jsons[j];
			positionIds[++i]=json["id"];
			pointsR[i]=new LTPoint(json["x"],json["y"]);
			title[i]=json["description"];
			markers[i] = new LTMarker(new LTPoint(json["x"],json["y"]),ico);
			map.addOverLay(markers[i]);
			show();
			//消除api标注
			//controlB.btnClick();  
			//controlB.btnClick();
			//给标记添加点击事件
			LTEvent.addListener( markers[i] , "mouseover" , function(){
				this.openInfoWinHtml(title[$.inArray(this,markers)])
			});		
			map.getBestMap(pointsR); 
		}
	}
	
	function showMess(obj){
	var index=$(obj).attr("value");
		markers[index].openInfoWinHtml(title[index]);
		map.moveToCenter(pointsR[index]);
		map.zoomTo(4);
		
	}
	</script>