Google Maps V3 加载

Google Maps V3简介：

      任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了 google.maps.Map 基础对象的用法和地图操作的基础知识。（如果您已经学习了第 2 版的辅导手册，您会发现，这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别，因此，请仔细阅读本文。）

初步了解 Google Maps API 的最简单方法就是看一个简单的示例。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<styletype="text/css">
   html {height:100%}  
   body {height:100%;margin:0px;padding:0px}  
   #map_canvas {height:100%}
</style>
//引用goole的javascript 此处必须设置sensor的值为true  OR  false
<scripttype="text/javascript"    src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<scripttype="text/javascript">  
function initialize()
{   
   var latlng =new google.maps.LatLng(-34.397,150.644);    
   var myOptions ={      zoom:8,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    };   
   var map =new google.maps.Map(document.getElementById("map_canvas"),        myOptions); 
 }
</script>
</head>
<bodyonload="initialize()">  
     <divid="map_canvas"style="width:100%;height:100%"></div>
</body>
</html>
 

 

建议标记

goole建议您在网络应用程序内使用html5的简单定义。在本文的这些例子中，我们使用了简单的 HTML5 DOCTYPE 将应用程序声明为 HTML5，如下所示：



<!DOCTYPE html>




当前的大部分浏览器会以“标准模式”呈现使用此 DOCTYPE 声明的内容，这意味着您的应用程序应当具有更强的跨浏览器适应能力。DOCTYPE 还被设计为可适度降级；无法理解它的浏览器会将它忽略，并使用“兼容模式”来显示内容。


缩放级别


如果要将包含完整地球的地图作为单幅图片提供，则要么需要极大的地图，要么需要分辨率极低的小型地图。因此，Google Maps 和 Maps API 内的地图图像被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下，一小组地图图块就可以覆盖广阔的区域；而在高缩放级别下，图块的分辨率会更高，覆盖的区域则会更小。


要指定地图的显示分辨率，您可以设置 Map 的 zoom 属性，其中缩放 0 相当于将地球地图缩小到最低程度，而较高的缩放级别会将地图放大到较高的分辨率。


下面三张图片分别反映了东京的同一位置在缩放级别为 0、7、18 时的情景。


  









            

            
posted @ 
2012-08-27 10:28 
学永不止步 
阅读(390) 
评论(0) 
 
收藏 
举报