1
<!
DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head >
5 < meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
6 < title > Google Maps JavaScript API Example </ title >
7 <!-- 使用 script 标签包含 Google 地图,key传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置 -->
8 < script src ="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
9 type ="text/javascript" ></ script >
10 < script type ="text/javascript" >
11
12 function initialize() {
13 var map = new GMap2(document.getElementById( " map_canvas " ));
14 // 住:缩放级别:在普通地图视图内,可以使用 0(最低缩放级别,在地图上可以看到整个世界)
15 // 到 19(最高缩放级别,可以看到独立建筑物)
16 map.setCenter( new GLatLng( 38.881946 , 121.587964 ), 15 );
17 // 在 Google 地图 API 中,地图使用标准的“绘制”图块显示
18
19 // 所有类型:G_NORMAL_MAP- 默认视图,
20 // G_SATELLITE_MAP - 显示 Google 地球卫星图像
21 // G_HYBRID_MAP - 混合显示普通视图和卫星视图
22 // G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用
23 map.setMapType(G_SATELLITE_MAP);
24
25 // 获得地图边界
26 var bounds = map.getBounds();
27 // 获得西南角坐标
28 var southWest = bounds.getSouthWest();
29 // 获得东北角坐标
30 var northEast = bounds.getNorthEast();
31 // 计算经度差
32 var lngSpan = northEast.lng() - southWest.lng();
33 // 计算纬度差
34 var latSpan = northEast.lat() - southWest.lat();
35 // 随机产生一个经度值和一个纬度值,构成一个坐标点
36 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
37 southWest.lng() + lngSpan * Math.random());
38 // 标记是 GMarker 类型的对象,将随机产生的坐标传给GMarker,并在地图上显示此标记。
39 map.addOverlay ( new GMarker (point));
40 }
41 </ script >
42 </ head >
43 <!-- 使用onLoad 事件初始化地图对象 -->
44 < body onload ="initialize()" onunload ="GUnload()" >
45 <!-- 让其显示在网页中 -->
46 < div id ="map_canvas" style ="width: 600px; height: 600px" ></ div >
47 </ body >
48 </ html >
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head >
5 < meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
6 < title > Google Maps JavaScript API Example </ title >
7 <!-- 使用 script 标签包含 Google 地图,key传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置 -->
8 < script src ="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
9 type ="text/javascript" ></ script >
10 < script type ="text/javascript" >
11
12 function initialize() {
13 var map = new GMap2(document.getElementById( " map_canvas " ));
14 // 住:缩放级别:在普通地图视图内,可以使用 0(最低缩放级别,在地图上可以看到整个世界)
15 // 到 19(最高缩放级别,可以看到独立建筑物)
16 map.setCenter( new GLatLng( 38.881946 , 121.587964 ), 15 );
17 // 在 Google 地图 API 中,地图使用标准的“绘制”图块显示
18
19 // 所有类型:G_NORMAL_MAP- 默认视图,
20 // G_SATELLITE_MAP - 显示 Google 地球卫星图像
21 // G_HYBRID_MAP - 混合显示普通视图和卫星视图
22 // G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用
23 map.setMapType(G_SATELLITE_MAP);
24
25 // 获得地图边界
26 var bounds = map.getBounds();
27 // 获得西南角坐标
28 var southWest = bounds.getSouthWest();
29 // 获得东北角坐标
30 var northEast = bounds.getNorthEast();
31 // 计算经度差
32 var lngSpan = northEast.lng() - southWest.lng();
33 // 计算纬度差
34 var latSpan = northEast.lat() - southWest.lat();
35 // 随机产生一个经度值和一个纬度值,构成一个坐标点
36 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
37 southWest.lng() + lngSpan * Math.random());
38 // 标记是 GMarker 类型的对象,将随机产生的坐标传给GMarker,并在地图上显示此标记。
39 map.addOverlay ( new GMarker (point));
40 }
41 </ script >
42 </ head >
43 <!-- 使用onLoad 事件初始化地图对象 -->
44 < body onload ="initialize()" onunload ="GUnload()" >
45 <!-- 让其显示在网页中 -->
46 < div id ="map_canvas" style ="width: 600px; height: 600px" ></ div >
47 </ body >
48 </ html >