WEB地图实现
web地图的实现其实是调用一组API来进行实现的,
当然在地图上肯定要实现目标的位置,要标注目标需要精确到其经纬度。你也可以在标注上设置提示。
API有很多,较常用的是51ditu.com。你只需要调用方法,将地图显示出来就可以了。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9 </HEAD>
10
11 <BODY>
12 <!--地图API-->
13 <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
14 <!--创建一个DIV-->
15 <div id="maps" style="position:relative; width:300px; height:200px; border:black solid 1px;">
16 <div align="center" style="margin:12px;">
17 </div>
18 </div>
19 <script>
20 var maps = new LTMaps( "maps" ); //maps为div的id
21 maps.cityNameAndZoom( "shiyan" , 2 );
22 var point = new LTPoint(11102524,3240136);//武当山经纬度
23 maps. centerAndZoom (point,1);
24 var c = new LTSmallMapControl();
25 maps.addControl(c);
26
27 var marker = new LTMarker( point );
28 maps.addOverLay(marker); //添加标注
29 var text = new LTMapText( marker );
30 text.setLabel( "武当山" );
31 maps.addOverLay(text);
32 </script>
33 </BODY>
34 </HTML>
35
2 <HTML>
3 <HEAD>
4 <TITLE> New Document </TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9 </HEAD>
10
11 <BODY>
12 <!--地图API-->
13 <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
14 <!--创建一个DIV-->
15 <div id="maps" style="position:relative; width:300px; height:200px; border:black solid 1px;">
16 <div align="center" style="margin:12px;">
17 </div>
18 </div>
19 <script>
20 var maps = new LTMaps( "maps" ); //maps为div的id
21 maps.cityNameAndZoom( "shiyan" , 2 );
22 var point = new LTPoint(11102524,3240136);//武当山经纬度
23 maps. centerAndZoom (point,1);
24 var c = new LTSmallMapControl();
25 maps.addControl(c);
26
27 var marker = new LTMarker( point );
28 maps.addOverLay(marker); //添加标注
29 var text = new LTMapText( marker );
30 text.setLabel( "武当山" );
31 maps.addOverLay(text);
32 </script>
33 </BODY>
34 </HTML>
35