<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' οnclick='showEditMarkerForm("+i+")'>编辑</span>][<span style='cursor:pointer;color:#FF6410' οnclick='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,"<");
tips[i]=markerEditForm.tips.value.replace(/</gi,"<");
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(/</gi,"<");
markerEditForm.tips.value=tips[i].replace(/</gi,"<");
win=markers[i].openInfoWinElement(markerEdit);
markerEdit.style.display="block";
win.setTitle("[<span style='cursor:pointer;color:#FF6410' οnclick='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' οnmοuseοver='this.className=\"markerListOver\"' οnmοuseοut='this.className=\"markerList\"' οnclick='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 οnlοad="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;" οnclick="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;" οnclick="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;" οnclick="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;" οnclick="showMapCtrl()">地图控制</div>
<div style="position:absolute;top:30px;">
<h4>以下是可选地图控制操作:</h4>
地图模式:
<input type="radio" name="mapMode" value="view" οnclick="changeMapMode(this)" checked>浏览
<input type="radio" name="mapMode" value="marker" οnclick="changeMapMode(this)">标注
<br>标注模式下可双击添加标注,拖曳移动标注,单击编辑标注.<br>
导航控件:
<input type="radio" name="mapCtrl" value="on" οnclick="changeMapCtrl(this)" checked>启用
<input type="radio" name="mapCtrl" value="off" οnclick="changeMapCtrl(this)">禁用
<br>启用导航控件可方便地对地图进行移动缩放等操作.<br>
键盘控制:
<input type="radio" name="keyBoard" value="on" οnclick="changeKeyBoard(this)" checked>启用
<input type="radio" name="keyBoard" value="off" οnclick="changeKeyBoard(this)">禁用
<br>启用键盘控制可通过键盘方向键移动地图.<br>
滚轮控制:
<input type="radio" name="mouseWheel" value="on" οnclick="changeMouseWheel(this)" checked>启用
<input type="radio" name="mouseWheel" value="off" οnclick="changeMouseWheel(this)">禁用
<br>启用滚轮控制可通过鼠标滚轮缩放地图.<br>
拉框放大:
<input type="radio" name="mouseDrag" value="on" οnclick="changeMouseDrag(this)">启用
<input type="radio" name="mouseDrag" value="off" οnclick="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" οnsubmit="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 ©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>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
