地图 Api 使用小记 (use 51ditu)

哎呀我日。。。写3次了，ie死3次。没耐心了。。。

写了好几百字关于SmartMap的发展。。。全没了。我郁闷 衰。
没心情写了，简单的贴贴使用代码吧，自己打开记事本保存*.html就行

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 2 < html >
 3 < head >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
 5 < title > JavaScript Maps API </ title >
 6
 7 <!-- 1、引入JavaScript文件 -->
 8 < script  language ="javascript"  src =" http://api.51ditu.com/js/maps.js " ></ script >
 9 </ head >
10 < body >
11
12
13 <!-- 2、引入一个DIV -->
14 < div  id ="myMap"  style ="position:relative; width:400px; height:300px;" ></ div >  
15
16 <!-- 3、创建地图对象 -->
17 < script  language ="javascript" >
18var maps = new LTMaps( "myMap" ); 
19
20maps.cityNameAndZoom( "haerbin" , 5 ); 
21//maps.centerAndZoom ( new LTPoint( 11636224 , 3991040 ) , 5 );
22
23 </ script >  
24
25 </ body >
26 </ html >

上面的是简单的地图显示

1 maps.cityNameAndZoom( "haerbin" , 5 ); 

显示城市为haerbin ,改成任意省份的全拼就是那个省了，第2个参数是显示比例，官方提供1-5，5是最大比例!

那我们日常遇到的，企业要标住地理位置怎么办那，别急，接着往下看吧！

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 2 < html >
 3 < head >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
 5 < title > JavaScript Maps API </ title >  
 6 < script  language ="javascript"  src =" http://api.51ditu.com/js/maps.js " ></ script >
 7 </ head >
 8
 9 < body >
10 < div  id ="myMap"  style ="position:relative; width:400px; height:300px;" ></ div >
11
12 < script  language ="javascript" >
13var maps = new LTMaps( "myMap" );
14maps.cityNameAndZoom( "haerbin" , 5 );
15maps.handleKeyboard(); //键盘操作支持
16maps.handleMouseScroll();//鼠标滚轮支持
17//var control = new LTStandMapControl();
18var control1 = new LTSmallMapControl();
19
20maps.addControl( control1 );
21var control = new LTMarkControl();
22maps.addControl( control );
23
24function getPoi(){
25
26var poi = control.getMarkControlPoint();
27
28alert( "纬度：" + poi.getLatitude() + "\n经度：" + poi.getLongitude() ); 
29}
30LTEvent.addListener( control , "mouseup" , getPoi );
31 </ script >
32 </ body >
33 </ html >
34

标住也不复杂，不要被上面杂乱代码所迷惑。。。
解释一下吧

1 maps.handleKeyboard(); //键盘操作支持
2 maps.handleMouseScroll();//鼠标滚轮支持

这是对鼠标和键盘的支持

1 var control1 = new LTSmallMapControl();
2
3 maps.addControl( control1 );
4 var control = new LTMarkControl();
5 maps.addControl( control );

比例尺调整控件填加

1 function getPoi(){
2
3 var poi = control.getMarkControlPoint();
4
5 alert( "纬度：" + poi.getLatitude() + "\n经度：" + poi.getLongitude() ); 
6 }
7 LTEvent.addListener( control , "mouseup" , getPoi );

得到当前坐标并显示！
到此就标住完必，一定要把纬度和经度记载下来啊,否则上头的活就白干了

下面来说显示，这个稍微有些复杂

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 2 < html >
 3 < head >
 4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
 5 < title > JavaScript Maps API </ title >  
 6 < script  language ="javascript"  src =" http://api.51ditu.com/js/maps.js " ></ script >
 7 </ head >
 8
 9 < body >
10 < div  id ="myMap"  style ="position:relative; width:400px; height:300px;" ></ div >
11
12 < script  language ="javascript" >
13var maps = new LTMaps( "myMap" );
14maps. centerAndZoom ( new LTPoint( 12668820 , 4574000 ) , 1 );
15var point = new LTPoint( 12668820 , 4574000 );
16var marker = new LTMarker( point );
17maps.addOverLay( marker );
18var infoWin = new LTInfoWindow( marker );
19infoWin.setLabel( "四海一家科技发展有限公司" ); 
20maps.addOverLay( infoWin );
21 </ script >
22 </ body >
23 </ html >
24

解释一下

1 maps. centerAndZoom ( new LTPoint( 12668820 , 4574000 ) , 1 );

地图以哪个点为中心显示。。。

1 var point = new LTPoint( 12668820 , 4574000 );
2 var marker = new LTMarker( point );
3 maps.addOverLay( marker );
4 var infoWin = new LTInfoWindow( marker );
5 infoWin.setLabel( "四海一家科技发展有限公司" ); 
6 maps.addOverLay( infoWin );

标记到某一点并添加到地图上。。。
累死之。。。好几次重做。。。ie频频死掉。。。人品？

最后祝福全天下的妇女,美女,女孩,,,,,妇女节快乐!

转载于:https://www.cnblogs.com/chinaeddy/archive/2008/03/08/1096539.html