如何将 51地图 添加到自己的网页中?

it2022-05-09  26

     前段时间,自己对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

相关资源:数据结构—成绩单生成器

最新回复(0)