前不久研究了一下51的地圖接口，感覺還不錯。但是在我們的醒目中想到電子地圖，首先想到的是Google吧，Google地球應該說沒有那個搞程序的沒有聽說過，Google的技術令我們稱歎。最近忙公司的事也好久沒有研究其他的東西了，今天起決定開始研究Google 地圖接口。
1. 參考文檔
Google Maps API2 文檔 地址: http://www.codechina.org/doc/google/gmapapi/#Control_Modification
今天粗略的看了一下，似乎Google map 的接口比51的要難。先不說這些喪氣的話，還是談談Google map吧
2. 接口基礎
首先還是看看Google 地圖的示例吧，這樣總能給人直觀的感覺，包括這種效果，能夠吸引人從而忘卻困難。
上面這張圖是顯示的上海市的地圖，感覺還是不錯的。接下來我們就以這張圖的效果看代碼。
代碼
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Google 地圖-基礎知識</title>
6 <style type="text/css">
7 .body{
8 text-align:center;
9 }
10 .map{
11 width:500px;
12 height:330px;
13 border-style:solid;
14 border-width:1px;
15 }
16 </style>
17 <!--
18 地址(http://maps.google.com/maps?file=api&v=2)是在您的頁面放置Google地圖需要的所有的代碼的JavaScript文件。
19 您的頁面必須包含指向這個地址的script標記
20 -->
21 <script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript">
22 </script>
23 <script language="JavaScript" type="text/javascript">
24 /**
25 * 初始化地圖 使用GMap2對象可以創建地圖並顯示在googlemap上面
26 * setCenter()可以設置地圖的中心位置和放縮比例
27 * GLatLng() 是基於地理信息也就是經緯度的,地圖的居中位置，標記的位置等等都是基於GLatLng的
28 * GPoint的x，y是像素，是相對於屏幕座標的
29 */
30 function load(){
31 var map = new GMap2(document.getElementById("googlemap"));
32 map.setCenter(new GLatLng(31.11,121.29), 10);
33 }
34 </script>
35 </head>
36 <body class="body" onload="load()">
37 <div id="googlemap" class="map">
38
39 </div>
40 </body>
41 </html>
42
能夠顯示上面的地圖關鍵代碼在於var map = new GMap2(document.getElementById("googlemap"));
同時還要引入js腳本: http://maps.google.com/maps?file=api&v=2
該腳本是Google map 顯示地圖的核心，這不用多說
該段代碼是指定id=“ googlemap” 的div作爲地圖的容器顯示，即地圖顯示在該div中。
使用setCenter() 設置了地圖的中心位置和放縮比例 ，而GLatLng對象則用於初始化地理位置，其中表示的地理位置的經緯度。
3. 地圖的移動
在我們看到的電子地圖中常常可以看到地圖中心由一個地方移到另一個地方，在Google map中同樣也實現了這樣的效果，它提供了一個簡單的函數輕鬆實現了地圖的移動。
代碼
2 var x=37.4569;
3 var y=-122.1569;
4 function load(){
5 var map = new GMap2(document.getElementById("googlemap"));
6 map.setCenter(new GLatLng(x,y), 10);
7
8 /**
9 * panTo() 使地圖的中心位置移到另一個位置
10 */
11 window.setTimeout(function(){
12 map.panTo(new GLatLng(31.11,121.29));
13 }, 5000);
14 }
15 </script>
上面的代碼panTo()方法就是是地圖的中心位置移動到另一個位置，它的參數就是設置經緯度對象。
代碼window.setTimeOut() 是爲了做出地圖移動的效果，在頁面加載5秒中之後自動轉移中心位置，這樣可以看出移動的效果。 下面是移動前後的兩個效果圖
此圖--移動之前的效果圖(爲國外的一個地理位置,至於那裏不清楚)
此圖--移動之後的效果圖(爲上海市的地理位置圖)
4. 添加控件
我們在網上看到的電子地圖往往不是這麼簡單，上面有很多控件幫助我們查找，顯示具體位置。下面就介紹添加控件的方法。首先看效果圖
此圖-與普通的地圖沒有區別，只是添加了兩個控件，一個是左上角的方向/縮放控件，另一個是右上角的衛星圖控件
此圖-爲衛星圖(添加相應的控件後可以看到此圖)
此圖-爲衛星圖和普通地圖的混合圖(也是要添加控件的)
下面的兩種效果是51地圖沒有的， 要用Google map api 實現此效果很簡單，有如下代碼即可
代碼
var x = 31.11;
var y = 121.29;
/**
* GSmallMapControl 一個在Google 地圖上使用的平移/縮放控件
* GMapTypeControl 可以在地圖和衛星圖之間進行切換的控件
*/
function load(){
var map = new GMap2(document.getElementById("googlemap"));
map.setCenter(new GLatLng(x, y), 10);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
</script>
上面的代碼中addControl() 就是用於添加效果的
GSmallMapControl 對象即爲左上角放縮/移動 控件，GMapTypeControl 對象是用於顯示右上角衛星圖控件的。
這裏的兩個控件用法 比較簡單，還有很多控件需要初始化屬性纔可以用，這裏不再講解，內容比較多，看文檔比較直接。具體可以參考 http://code.google.com/intl/zh-CN/apis/maps/documentation/controls.html
