利用ajax根据地图的视图选择性的显示标记

<html xmlns:v="urn:schemas-microsoft-com:vml">
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<meta name="keywords" content="大同巴士快车,大同地图,LTAjax.loadRemoteXml,JavaScript,灵图,51ditu Javascript API AJAX范例文档,地图,范例文档"/?>
<title>大同地图展示</title>
<style type="text/css">v\:*{behavior:url(#default#VML);}</style>
<script language="javascript" src=" [url]http://api.51ditu.com/js/maps.js[/url]"></script>
<script language="javascript" src=" [url]http://api.51ditu.com/js/ajax.js[/url]"></script>
<script language="javascript">
 var maps;
 var moveLsitener;
 function InitAjax()
 {
  var ajax=false;
  try {
   ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (E) {
    ajax = false;
   }
  }
  if (!ajax && typeof XMLHttpRequest!='undefined') {
   ajax = new XMLHttpRequest();
  }
  return ajax;
 }
 
   
 function onDblClick()//定义在双击的时候执行的函数
 {
  moveLsitener=LTEvent.addListener(maps,"moveend",onMoveEnd);
  //因为系统默认双击的时候会将地图定位到中心,因此,只需要定义地图在定位到中心完成之后放大地图即可
 }
 function onMoveEnd(point)//定义地图在定位到中心完成之后执行的函数
 {
  LTEvent.removeListener(moveLsitener); //删除事件注册
  maps.zoomIn();       //放大地图
  //***********自动执行showLatLng()**************
 }
 
 function dispMarker(points,nam){
  var marker = new LTMarker( points );
  marker.enableDrag();   
  maps.addOverLay( marker );
 
  var text  =new LTMapText(marker);//建立地图文本对象
  text.setLabel( nam );
  maps.addOverLay(text);  
 }  
 
 function showLatLng()
 {
  maps.clearOverLays();//移除地图上的所有标注
  var msg = document.getElementById("msg");
  var cZoom  = maps.getCurrentZoom();
  var bounds = maps.getBoundsLatLng();
  var bndstr = bounds.getXmin()+","+bounds.getYmin()+", "+bounds.getXmax()+","+bounds.getYmax();
  var cPoint = maps.getCenterPoint();
  //msg.innerHTML= "地图中心点坐标:"+cPoint.getLongitude()+","+cPoint.getLatitude()+","+cZoom+". 范围: "+bndstr+"<br>";
  var ajax = InitAjax();
  var goUrl   = " [url]http://ditu.dtbus.com/lnglat.php[/url]";
  var postStr = "bndstr=" + bndstr +"&cZoom="+ cZoom;
  ajax.open("POST", goUrl, true);
  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  ajax.send(postStr);
  ajax.onreadystatechange = function() {
   if (ajax.readyState == 4 && ajax.status == 200) {
    //msg.innerHTML=ajax.responseText;
    var pstrs = ajax.responseText.split("<br>");
    for(i=0; i<pstrs.length; i++){
     var pr = pstrs[i].split(",")
     dispMarker(new LTPoint(pr[0],pr[1]) , pr[2]); //pr[2]:名称
    }
   }
  }
 }
 
 function onLoad()
 {
  maps=new LTMaps("mapDiv");
  maps.centerAndZoom( "datong" , 8 );
  maps.addControl(new LTStandMapControl());
  showLatLng(); //第一次
  LTEvent.addListener(maps,"dblclick",onDblClick);  //双击地图事件
  LTEvent.addListener(maps,"moveend",showLatLng);   //在地图有变化的时候显示新的经纬度
  LTEvent.addListener(maps,"zoom",showLatLng);   //在地图有变化的时候显示新的经纬度
 }  
</script>
<body onload="onLoad()">
<!--创建一个DIV-->
<div id="mapDiv" style="position:relative; width:700px; height:550px; border:black solid 1px;">
<div align="center" style="margin:12px;">
<a href=" [url]http://api.51ditu.com/docs/mapsapi/help.html[/url]" target="_blank" style="color:#D01E14;font-weight:bolder;font-size:12px;">看不到地图请点这里</a>
</div></div>
<div id="msg"></div>
程序演示:[url]http://cnc.dtbus.com[/url]

你可能感兴趣的:(JavaScript,Ajax,map,地图,51ditu)