51 地图基本接口(二)

 

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 

 

　　这段代码中有个<div> 层，主要将地图显示在这个层上面。并控制地图显示的大小。

　　上图中的0001 区段 是使用 maps.handleMouseScroll() 使用该方法可以使用鼠标滑动来拖动地图。

　　上图中的0002 区段 是添加的一个lable 标注 ，即infoWin.setLabel() ，我们可以点击这个标注跳转页面。

　　上图中的0003 区段 使用LTMarker 在确定的经纬度地方添加标注突出显示