51 地图基本接口(二)
2010-02-09 09:25 贺臣 阅读(1032) 评论(0) 编辑 收藏 举报
1. 51 map 地图接口
地图接口是我们用的非常多的一个接口，通常用于显示地图的地理位置和突出显示某个地理位置。当然这里只是一个普通的显示显示地图，我们还可以通过搜索来确定地理位置，这将在后面的文章中说明。
2. 51 地图接口说明
<script language="javascript" src="http://api.51ditu.com/js/maps.js "></script>
这是显示地图必须要引入的js。
3. 51地图接口使用
代码
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Untitled Document</title>
5 <script language="javascript" src="http://api.51ditu.com/js/maps.js "></script>
6 <script language="JavaScript" type="text/javascript">
7 /**
8 * LTMaps 在指定的div上创建一个地图
9 *
10 * cityNameAndZoom ：指定地图显示的地区, 该地区必须是地图能够查询的，后面的参数
11 * 值也大显示的区域范围越大，路标月不详细。如果要显示街道等需将值改小
12 *
13 * LTPoint ：用于标注地理位置的经纬度，如果获得的经纬度为112.4度等，则需要乘以100000
14 * 才能获得准确标识位置
15 *
16 * centerAndZoom : 这个方法用于设置地图的中心位置和放缩比例
17 *
18 * LTStandMapControl : 创建标注的缩放控件，即地图上拖动的放大缩小比例滚动条
19 *
20 * LTMarker : 用于在某经纬度地方加入标注，即确切的经纬度地方显示突出
21 *
22 * moveToCenter ： 地图移动到地图中心
23 *
24 * handleMouseScroll : 当鼠标滑动时候可以拖动地图
25 *
26 * maps.addControl(new LTOverviewMapControl()) ：为地图添加鹰眼
27 *
28 * maps.addOverLay ：用于添加地址提示
29 */
30 function showMap(){
31 var maps=new LTMaps("myMap");
32 maps.cityNameAndZoom( "beijing" , 1 );
33
34 var point = new LTPoint( 11765253, 2451414);
35 maps.centerAndZoom(point,3);
36
37 var control = new LTStandMapControl();
38 maps.addControl( control );
39
40 var marker = new LTMarker( point );
41 maps.addOverLay( marker );
42
43 maps.moveToCenter(point);
44
45 maps.handleMouseScroll();
46
47 /*if (document.body.offsetWidth > 200) {
48 maps.addControl(new LTOverviewMapControl());
49 }*/
50
51 var infoWin = new LTInfoWindow( marker );
52 infoWin.setLabel( "<a target='_about' href='http://www.cnblogs.com/qingyuan'>情缘测试地图</a>" ); //加入提示框
53 maps.addOverLay( infoWin );
54 }
55 </script>
56 </head>
57 <body onload="showMap()">
58 <div id="myMap" style="position:relative; width:400px; height:300px;"></div>
59 </body>
60 </html>
61
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Untitled Document</title>
5 <script language="javascript" src="http://api.51ditu.com/js/maps.js "></script>
6 <script language="JavaScript" type="text/javascript">
7 /**
8 * LTMaps 在指定的div上创建一个地图
9 *
10 * cityNameAndZoom ：指定地图显示的地区, 该地区必须是地图能够查询的，后面的参数
11 * 值也大显示的区域范围越大，路标月不详细。如果要显示街道等需将值改小
12 *
13 * LTPoint ：用于标注地理位置的经纬度，如果获得的经纬度为112.4度等，则需要乘以100000
14 * 才能获得准确标识位置
15 *
16 * centerAndZoom : 这个方法用于设置地图的中心位置和放缩比例
17 *
18 * LTStandMapControl : 创建标注的缩放控件，即地图上拖动的放大缩小比例滚动条
19 *
20 * LTMarker : 用于在某经纬度地方加入标注，即确切的经纬度地方显示突出
21 *
22 * moveToCenter ： 地图移动到地图中心
23 *
24 * handleMouseScroll : 当鼠标滑动时候可以拖动地图
25 *
26 * maps.addControl(new LTOverviewMapControl()) ：为地图添加鹰眼
27 *
28 * maps.addOverLay ：用于添加地址提示
29 */
30 function showMap(){
31 var maps=new LTMaps("myMap");
32 maps.cityNameAndZoom( "beijing" , 1 );
33
34 var point = new LTPoint( 11765253, 2451414);
35 maps.centerAndZoom(point,3);
36
37 var control = new LTStandMapControl();
38 maps.addControl( control );
39
40 var marker = new LTMarker( point );
41 maps.addOverLay( marker );
42
43 maps.moveToCenter(point);
44
45 maps.handleMouseScroll();
46
47 /*if (document.body.offsetWidth > 200) {
48 maps.addControl(new LTOverviewMapControl());
49 }*/
50
51 var infoWin = new LTInfoWindow( marker );
52 infoWin.setLabel( "<a target='_about' href='http://www.cnblogs.com/qingyuan'>情缘测试地图</a>" ); //加入提示框
53 maps.addOverLay( infoWin );
54 }
55 </script>
56 </head>
57 <body onload="showMap()">
58 <div id="myMap" style="position:relative; width:400px; height:300px;"></div>
59 </body>
60 </html>
61
这段代码中有个<div> 层，主要将地图显示在这个层上面。并控制地图显示的大小。
上图中的0001 区段 是使用 maps.handleMouseScroll() 使用该方法可以使用鼠标滑动来拖动地图。
上图中的0002 区段 是添加的一个lable 标注 ，即infoWin.setLabel() ，我们可以点击这个标注跳转页面。
上图中的0003 区段 使用LTMarker 在确定的经纬度地方添加标注突出显示
