hao_2468

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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

posted on 2009-09-28 16:52  hao_2468  阅读(163)  评论(0编辑  收藏  举报