前段时间,自己对51地图做了一些小小的测试,现将测试的部分代码贴出来共享,基本都有做过注释了。
代码如下:
<head runat="server">
<style type="text/css">
<!
-- v\:*
{
behavior: url(#default#VML);
}
-- >
</style>
<!--1、引入JavaScript文件-->
<script language="javascript" type="text/javascript" src=" http://api.51ditu.com/js/maps.js "></script>
</head>
<body style="padding: 0; margin: 0;">
<!--2、引入一个DIV-->
<div id="myMap" style="width: 1020px; height: 610px;">
</div>
<!--3、创建地图对象-->
<script language="javascript" type="text/javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "suzhou" ,4); //设置城市(中文地名,地名拼音,电话区号,行政区),和显示级别
// var c = new LTSmallMapControl(); //简易缩放控件
// maps.addControl(c);
var c = new LTStandMapControl(); //标准缩放控件
maps.addControl(c);
var controlLength = new LTPolyLineControl(); //测试距离的按钮(注意,必须添加样式表中的那段,要不然不能使用)
maps.addControl(controlLength);
controlLength.setTop( 50 ); //按钮距离顶部的位置
var controlS = new LTPolygonControl(); //测试所圈地区的按钮(注意,必须添加样式表中的那段,要不然不能使用)
maps.addControl(controlS);
controlS.setTop( 50 ); //按钮距离顶部的位置
var controlMark = new LTMarkControl();//标注控件
maps.addControl( controlMark );
function getPoi(){
var poi = controlMark.getMarkControlPoint();
alert( "纬度:" + poi.getLatitude() + "\n经度:" + poi.getLongitude() );
}
LTEvent.addListener( controlMark , "mouseup" , getPoi );//给控件添加鼠标事件
var control = new LTScaleControl();//比例尺显示
maps.addControl( control );
var point = new LTMarker( new LTPoint( 12060217,3130647) );
// var text = new LTMapText( point );
// text.setLabel( "<a href='http://www.tt8484.com' target='_blank'>苏州青旅石路</a>" );
// text.setBackgroundColor( "red" );
maps.addOverLay( point );
// LTEvent.addListener(point,"mouseover",function(){ point.openInfoWinHtml( "欢迎光临苏州青旅,石路办公室!欢迎光临苏州青旅,石路办公室!欢迎光临苏州青旅,石路办公室!欢迎光临苏州青旅,石路办公室!" ) } );
// point.setInfoWinWidth( 180 );
// point.setInfoWinHeight( 100 );
LTEvent.addListener( point , "mouseover" , function(){ point.openInfoWinUrl( "http://www.tt8484.com" ) } );//鼠标放上来的时候,显示的提示窗口,可以任意定制
point.setInfoWinWidth( 180 );
point.setInfoWinHeight( 150 );
maps.handleKeyboard(); //键盘操作支持
maps.handleMouseScroll();//鼠标滚轮支持
</script>
<div class="anli_content_msg_01">
<div class="anli_content_msg_01_pic">
<img src="images/ainli_pic/aa.jpg" alt="anli01" /><br />
</div>
<div class="anli_content_msg_01_msg">
案例名称</div>
</div>
</body>