地图 Api 使用小记 (use 51ditu)
哎呀我日。。。写3次了,ie死3次。没耐心了。。。
写了好几百字关于SmartMap的发展。。。全没了。我郁闷衰。
没心情写了,简单的贴贴使用代码吧,自己打开记事本保存*.html就行
上面的是简单的地图显示
那我们日常遇到的,企业要标住地理位置怎么办那,别急,接着往下看吧!
解释一下吧
到此就标住完必,一定要把纬度和经度记载下来啊,否则上头的活就白干了
下面来说显示,这个稍微有些复杂
累死之。。。好几次重做。。。ie频频死掉。。。人品?
最后祝福全天下的妇女,美女,女孩,,,,,妇女节快乐!
写了好几百字关于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>
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>
上面的是简单的地图显示
1maps.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
标住也不复杂,不要被上面杂乱代码所迷惑。。。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
解释一下吧
1maps.handleKeyboard(); //键盘操作支持
2maps.handleMouseScroll();//鼠标滚轮支持
这是对鼠标和键盘的支持2maps.handleMouseScroll();//鼠标滚轮支持
1var control1 = new LTSmallMapControl();
2
3maps.addControl( control1 );
4var control = new LTMarkControl();
5maps.addControl( control );
比例尺调整控件填加2
3maps.addControl( control1 );
4var control = new LTMarkControl();
5maps.addControl( control );
1function getPoi(){
2
3var poi = control.getMarkControlPoint();
4
5alert( "纬度:" + poi.getLatitude() + "\n经度:" + poi.getLongitude() );
6}
7LTEvent.addListener( control , "mouseup" , getPoi );
得到当前坐标并显示!2
3var poi = control.getMarkControlPoint();
4
5alert( "纬度:" + poi.getLatitude() + "\n经度:" + poi.getLongitude() );
6}
7LTEvent.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
解释一下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
1maps. centerAndZoom ( new LTPoint( 12668820 , 4574000 ) , 1 );
地图以哪个点为中心显示。。。1var point = new LTPoint( 12668820 , 4574000 );
2var marker = new LTMarker( point );
3maps.addOverLay( marker );
4var infoWin = new LTInfoWindow( marker );
5infoWin.setLabel( "四海一家科技发展有限公司" );
6maps.addOverLay( infoWin );
标记到某一点并添加到地图上。。。2var marker = new LTMarker( point );
3maps.addOverLay( marker );
4var infoWin = new LTInfoWindow( marker );
5infoWin.setLabel( "四海一家科技发展有限公司" );
6maps.addOverLay( infoWin );
累死之。。。好几次重做。。。ie频频死掉。。。人品?
最后祝福全天下的妇女,美女,女孩,,,,,妇女节快乐!