JS 实现地图的效果，值得研究

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<meta name="keywords" content="LTMapText.setLabel,LTMaps.addOverLay,LTMarker,JavaScript,灵图,51ditu Maps API,地图,范例文档,vml"/>
<title>我要地图接口使用范例-灵图51ditu Maps API范例</title>
<style type="text/css">
v\:*{behavior:url(#default#VML);}
.markerList
{
 color:#FF6410;font-weight:bold;font-size: 10pt;background-color:#CCFFFF;
}
.markerListOver
{
 cursor:pointer;color:#FF6410;font-weight:bold;font-size: 10pt;background-color:#CCCCFF;
}
</style>
<script language="javascript">
 var map;
 var win;
 var points=[];
 var mapTexts=[];
 var markers=[];
 var labels=[];
 var tips=[];
 var moveLsitener;
 var markerEdit;
 var markerEditForm;
 var lTStandMapControl;//地图导航控件
 var lTRectControl;//拉框控件
 var mapMode;
 var mapDrag;

 function onMouseOver()
 { 
  this.setVisible(true);
 }

 function onMouseOut()
 {
  this.setVisible(false);
 }

 function onMoveEnd()//定义地图在定位到中心完成之后执行的函数
 {
  LTEvent.removeListener(moveLsitener);//删除事件注册
  var point=map.getCenterPoint();//根据像素位置p求出经纬度坐标
  points.push(point);
  addMarker(points.length-1);
  showEditMarkerForm(points.length-1);
  //map.zoomIn();//放大地图
 }

 function onDblClick(point)
 {
  if(mapMode=="marker")
  {
   points.push(point);
   addMarker(points.length-1);
   showEditMarkerForm(points.length-1);
  }
 }

 function onDblClick1()//定义在双击的时候执行的函数
 {
  if(mapMode=="marker") moveLsitener=LTEvent.addListener(map,"moveend",onMoveEnd);
  //因为系统默认双击的时候会将地图定位到中心，因此，只需要定义地图在定位到中心完成之后添加自己的事件即可
 }

 function onDraw(bounds,rect)
 {
  //var points=[new LTPoint(bounds.getXmin(),bounds.getYmin()),new LTPoint(bounds.getXmin(),bounds.getYmax()),new LTPoint(bounds.getXmax(),bounds.getYmax()),new LTPoint(bounds.getXmax(),bounds.getYmin())];
  //map.getBestMap(points);//将地图定位到最佳视图
  var point=new LTPoint((bounds.getXmin()+bounds.getXmax())/2,(bounds.getYmin()+bounds.getYmax())/2);
  var zoom=map.getBestZoom(bounds);
  map.moveToCenter(point);
  map.zoomTo(zoom);
  this.clear();
 }
 
 function dragEndCallBack(i)
 {
  return function()
  {
   if(points[i]==this.point) return;
   if(confirm("真的要移动标注吗?"))
   {
    points[i]=this.point;
    mapTexts[i].setPoint(points[i]);
    showMarker(i);
   }
   else
   {    
    markers[i].setPoint(points[i]);
   }
  }
 }

 function clickMarkerCallBack(i)
 {
  return function()
  {
   showMarker(i);
  };
 }

 function showMarker(i)
 {
  //map.moveToCenter(points[i]);
  win=markers[i].openInfoWinHtml("<div align=left style='width:200px;height:100px;overflow:auto'>"+tips[i].replace(/[\n]/g,"<br>")+"</div>");
  if(mapMode=="marker")
   win.setTitle("[<span style='cursor:pointer;color:#FF6410' onclick='showEditMarkerForm("+i+")'>编辑</span>][<span style='cursor:pointer;color:#FF6410' onclick='deleteMarker("+i+")'>删除</span>]"+labels[i]);
  else 
   win.setTitle(labels[i]);
  win.moveToShow();
 }

 function deleteMarker(i)
 {
  if(confirm("真的要删除标注\""+labels[i]+"\"吗?"))
  {
   map.removeOverLay(markers[i],true);
   map.removeOverLay(mapTexts[i],true);
   win.closeInfoWindow();
   $("mapList").removeChild($("markerList"+i));
  }
 }

 function editMarker()
 {
  if(!/.{2,30}/.test(markerEditForm.label.value))
  {
   alert("标注名称必须为2到30个字符");
   return false;
  }
  if(markerEditForm.tips.value.length>250)
  {
   alert("标注说明必须为0到250个字符");
   return false;
  }
  i=markerEditForm.index.value;
  labels[i]=markerEditForm.label.value.replace(/</gi,"&lt;");
  tips[i]=markerEditForm.tips.value.replace(/</gi,"&lt;");
  mapTexts[i].setLabel(labels[i]);
  $("markerList"+i).innerHTML=labels[i];
  showMarker(i);
  return false;
 }

 function showEditMarkerForm(i)
 {
  markerEditForm.index.value=i;
  markerEditForm.label.value=labels[i].replace(/&lt;/gi,"<");
  markerEditForm.tips.value=tips[i].replace(/&lt;/gi,"<");
  win=markers[i].openInfoWinElement(markerEdit);
  markerEdit.style.display="block";
  win.setTitle("[<span style='cursor:pointer;color:#FF6410' onclick='markerEditForm.submit.click()'>确定</span>]"+labels[i]); 
  win.moveToShow();
 }

 function addMarker(i)
 {
  var point=points[i];
  var x=point.getLongitude();
  var y=point.getLatitude();
  markers[i] = new LTMarker(point);
  mapTexts[i] = new LTMapText(markers[i]);
  labels[i]="第"+(1+i)+"个标注";
  tips[i]="坐标位置:"+ x + "," + y + "\n你可以在这里添加标注说明.";
  mapTexts[i].setLabel(labels[i]);
  mapTexts[i].setVisible(false);
  mapTexts[i].setNoWrap(false);
  map.addOverLay(markers[i]);
  map.addOverLay(mapTexts[i]);
  if(mapMode=="marker")
  {
   markers[i].enableDrag();
  }
  LTEvent.addListener(markers[i],"click",clickMarkerCallBack(i));
  LTEvent.addListener(markers[i],"dragend",dragEndCallBack(i));
  LTEvent.bind(markers[i],"mouseover",mapTexts[i],onMouseOver);
  LTEvent.bind(markers[i],"mouseout",mapTexts[i],onMouseOut);
  $("mapList").innerHTML+="<div id='markerList"+i+"' class='markerList' onmouseover='this.className=\"markerListOver\"' onmouseout='this.className=\"markerList\"' onclick='showMarker("+i+")'>"+labels[i]+"</a></div>";
 }

 function onLoad()
 {
  mapMode="view";
  mapDrag=0;
  map=new LTMaps("mapDiv");

  lTStandMapControl=new LTStandMapControl();//地图导航控件
  lTRectControl = new LTRectControl();//拉框控件
  lTRectControl.setVisible(false);
  LTEvent.addListener(lTRectControl,"draw",onDraw)
  map.addControl(lTRectControl);
  map.addControl(lTStandMapControl);

  map.centerAndZoom(new LTPoint(11177540,2314850),0);
  map.handleKeyboard();//启用键盘
  map.handleMouseScroll();//启用鼠标滚轮功能支持，参数true代表使用鼠标指向点位置不变模式

  points.push(new LTPoint(11177440,2314850));
  points.push(new LTPoint(11177540,2314850));
  points.push(new LTPoint(11177640,2314850));
  for(i=0;i<points.length;i++)
  {
   addMarker(i);
  }
  //LTEvent.addListener(map,"dblclick",onDblClick1);//在地图被双击时，先调用系统函数(定位到中心)，再执行onDblClick函数
  LTEvent.bind(map,"dblclick",map,onDblClick);//绑定事件，在双击的时候先执行onDblClick函数，再调用系统函数(定位到中心)
  markerEditForm=document.forms["markerEditForm"];
  markerEdit=$("markerEdit");
 }

 function showMapInfo()
 {
  $("mapInfo").style.display="block";
  $("mapCtrl").style.display="none";
 }

 function showMapCtrl()
 {
  if(map==null) return;
  $("mapInfo").style.display="none";
  $("mapCtrl").style.display="block";
 }

 function changeMapMode(obj)
 {
  var value=obj.value;
  if(value==mapMode) return;
  mapMode=value;
  if(mapMode=="marker")
  {
   for(var i=0;i<points.length;i++)
   {
    markers[i].enableDrag();
   }
  }
  else
  {
   for(var i=0;i<points.length;i++)
   {
    markers[i].disableDrag();
   }
  }
  obj.blur();
 }

 function changeMapCtrl(obj)
 {
  var value=obj.value;
  try
  {
   if(value=="off")
   {
    map.removeControl(lTStandMapControl);
   }
   else
   {
    map.addControl(lTStandMapControl);
   }
   obj.blur();
  }
  catch(e)
  {
  }
 }

 function changeKeyBoard(obj)
 {
  var value=obj.value;
  try
  {
   if(value=="off")
   {
    map.clearHandleKeyboard();
   }
   else
   {
    map.handleKeyboard();
   }
   obj.blur();
  }
  catch(e)
  {
  }
 }

 function changeMouseWheel(obj)
 {
  var value=obj.value;
  try
  {
   if(value=="off")
   {
    map.clearHandleMouseScroll();
   }
   else
   {
    map.handleMouseScroll();
   }
   obj.blur();
  }
  catch(e)
  {
  }
 }

 function changeMouseDrag(obj)
 {
  var value=obj.value;
  try
  {
   if(value=="on"&&mapDrag==0)
   {
    lTRectControl.btnClick();
    mapDrag=1;
   }
   else if(value=="off"&&mapDrag==1)
   {
    lTRectControl.btnClick();
    mapDrag=0;
   }
   obj.blur();
  }
  catch(e)
  {
  }
 }

 function $(id)
 {
  return document.getElementById(id);
 }
</script>
</head>
<body onload="onLoad()">
<div align="center">
<h2>我要地图接口使用范例</h2>
</div>
 <div id="mapInfo" align="left" style="position:absolute;width:200px; height:400px;top:60px;left:10px;border:#F2BB6F solid 1px;overflow-x:hidden;overflow-y:auto;font-size:12px;display:block">
  <div style="position:absolute;height:20px;left:0px;background-color:#FF6410;color:#FFFFFF;font-weight:bold;font-size: 10pt;border:#F2BB6F solid 1px;cursor:pointer;" onclick="showMapInfo()">使用说明</div>
  <div style="position:absolute;height:20px;left:60px;background-color:#FFFFFF;color:#FF6410;font-weight:bold;font-size: 10pt;border:#F2BB6F solid 1px;cursor:pointer;" onclick="showMapCtrl()">地图控制</div>
  <div style="position:absolute;top:30px;">
  <h4>本范例主要实现以下功能:</h4>
  <ul>
  <li>地图加载初始化(地图导航控件,中心定位缩放等)</li>
  <li>启用键盘方向键控制地图移动</li>
  <li>启用鼠标滚轮控制地图缩放</li>
  <li>添加自定义标注(双击左键添加)</li>
  <li>点击标注图标弹出标注提示窗口</li>
  <li>拖曳标注图移动标注位置</li>
  <li>编辑标注说明(在标注提示窗口中点击"编辑")</li>
  <li>点击导航列表自动定位到指定标注</li>
  <li>拉框放大和拖曳定位功能的切换</li>
  </ul>
  <h4>浏览代码请查看源文件.</h4>
  <a href="http://api.51ditu.com/docs/mapsapi/reference.html" target="_blank">51ditu Maps API 类参考文档</a><br>
  </div>
 </div>
 <div id="mapCtrl" align="left" style="position:absolute;width:200px; height:400px;top:60px;left:10px;border:#F2BB6F solid 1px;overflow-x:hidden;overflow-y:auto;font-size:12px;display:none">
  <div style="position:absolute;height:20px;left:0px;background-color:#FFFFFF;color:#FF6410;font-weight:bold;font-size: 10pt;border:#F2BB6F solid 1px;cursor:pointer;" onclick="showMapInfo()">使用说明</div>
  <div style="position:absolute;height:20px;left:60px;background-color:#FF6410;color:#FFFFFF;font-weight:bold;font-size: 10pt;border:#F2BB6F solid 1px;cursor:pointer;" onclick="showMapCtrl()">地图控制</div>
  <div style="position:absolute;top:30px;">
  <h4>以下是可选地图控制操作:</h4>
  地图模式:
  <input type="radio" name="mapMode" value="view" onclick="changeMapMode(this)" checked>浏览
  <input type="radio" name="mapMode" value="marker" onclick="changeMapMode(this)">标注
  <br>标注模式下可双击添加标注,拖曳移动标注,单击编辑标注.<br>
  导航控件:
  <input type="radio" name="mapCtrl" value="on" onclick="changeMapCtrl(this)" checked>启用
  <input type="radio" name="mapCtrl" value="off" onclick="changeMapCtrl(this)">禁用
  <br>启用导航控件可方便地对地图进行移动缩放等操作.<br>
  键盘控制:
  <input type="radio" name="keyBoard" value="on" onclick="changeKeyBoard(this)" checked>启用
  <input type="radio" name="keyBoard" value="off" onclick="changeKeyBoard(this)">禁用
  <br>启用键盘控制可通过键盘方向键移动地图.<br>
  滚轮控制:
  <input type="radio" name="mouseWheel" value="on" onclick="changeMouseWheel(this)" checked>启用
  <input type="radio" name="mouseWheel" value="off" onclick="changeMouseWheel(this)">禁用
  <br>启用滚轮控制可通过鼠标滚轮缩放地图.<br>
  拉框放大:
  <input type="radio" name="mouseDrag" value="on" onclick="changeMouseDrag(this)">启用
  <input type="radio" name="mouseDrag" value="off" onclick="changeMouseDrag(this)" checked>禁用
  <br>启用拉框放大可通过拖曳鼠标局部放大地图.<br>
  </div>
 </div>
 <div id="mapDiv" style="position:absolute;width:500px; height:400px;top:60px;left:220px;border:#F2BB6F solid 1px;">
  <div id="loading" align="center" style="margin:30% auto;color:#FF6410;font-weight:bold;font-size: 10pt;">
  正载加载地图,请稍候...<br>
  <marquee direction="right" scrollamount=8 scrolldelay=50 style="border:1px solid #666666;height:15px;width:300px;font-size:1px;"><span style="height:15px;width:90px;background-color:#366BD4;filter:alpha(opacity=0,finishopacity=60,style=1)"></span><span style="height:15px;width:90px;background-color:#366BD4;opacity:0.6;filter:alpha(opacity=60,finishopacity=0,style=1)"></span></marquee>
  </div>
 </div>
 <div id="mapList" style="position:absolute;width:200px; height:400px;top:60px;left:730px;border:#F2BB6F solid 1px;overflow-x:hidden;overflow-y:auto;">
 </div>
 <div id="markerEdit" style="display:none">
 <form name="markerEditForm" action="" method="post" onsubmit="return editMarker()">
 <input type="submit" name="submit" value="确定" style="display:none">
 <input type="hidden" name="index" value="0">
 <input type="text" name="label" value="" style="width:200px;border:#F2BB6F solid 1px" maxlength="30"><br>
 <textarea name="tips" style="font-size:12px;width:200px;height:60px;border:#F2BB6F solid 1px;overflow-y:auto"></textarea>
 </form>
 </div>
<div align="center" style="position:absolute;top:480px;font-size:12px;color:#FF6410;width:90%" >
如果你觉得本网页对你有用,请介绍给你的QQ好友,谢谢!<br>
<a href="http://qbit.100steps.net/javascript/qqlevel.htm" target="_blank">QQ等级查询</a>
<a href="http://qbit.100steps.net/ip.php" target="_blank">IP地址查询</a>
<a href="http://qbit.100steps.net/proxy.php" target="_blank">每日代理公布</a>
<br>
Copyright &copy;2001 - 2008 <a href="http://qbit.100steps.net" target="_blank">qbit.100steps.net</a> All Rights Reserved
Power by qbit(QQ:324324)
<script src="http://qbit.100steps.net/count.php?time=100000000000"></script>
<script language="javascript" type="text/javascript" src="http://js.users.51.la/1041756.js"></script>
<noscript><a href="http://www.51.la/?1041756" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/1041756.asp" style="border:none" /></a></noscript>
</div>
</body>
</html>
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>

posted on 2009-03-11 16:55  poop  阅读(3398)  评论(0)  编辑  收藏  举报