前段时间,自己对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>
转载于:https://www.cnblogs.com/n666/archive/2009/09/28/2191120.html
相关资源:数据结构—成绩单生成器