在地图的边界内，随机放置一个标记【GMap 学习笔记】

在地图的边界内，随机放置一个标记【GMap 学习笔记】

 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&amp;v=2&amp;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 >
49