轉載地址：http://www.cnblogs.com/ttc/archive/2010/10/18/1854438.html
目錄
Google Map API
1基礎知識
1.1 Google 地圖 API 概念
1.2 Google 地圖的“Hello, World”
1.2.1 加載 Google 地圖 API
1.2.2 地圖 DOM 元素
1.2.3 GMap2 - 基本對象
1.2.4 初始化地圖
1.2.5 加載地圖
2正向標註
2.1 Map2類
2.2谷歌可視化API
2.3 GClientGeocoder 類
構造函數
方法
2.4 GMarker 類
構造函數
方法
事件
2.5 GLatLng 類
構造函數
2.6函數 GDownloadUrl
2.7可拖動的標記
2.8手動標註
2.9自動標註
2.9.1隨機生成
2.9.2讀XML文件
3反向標註
3.1從Marker到列表
3.2從列表到Mark
4任意多邊形
4.1 GPolyline 類
構造函數
方法
4.2 GLatLngBounds 類
構造函數
方法
4.3矩形選擇
4.4可調的多邊形
4.4.1樣式設置
4.4.2頂點數據獲取
4.5不可調的多邊形
5自定義GMarker
5.1 GMarker添加文字
5.2添加滑動門效果
5.3自定義圖片無效果
6地圖控件與地圖屬性控件概述
7參考資料
Google Map API
1基礎知識
1.1 Google 地圖 API 概念
歡迎閱讀 Google 地圖 API 開發人員文檔！Google 地圖 JavaScript API 使您可以在網頁中嵌入 Google 地圖。要使用該 API，您需要先註冊以獲取 API 密鑰。收到 API 密鑰之後，即可以按照本文檔中的說明開發地圖應用程序。
任何 Google
地圖 API 應用程序中的基礎元素都是“地圖”本身。本文檔討論
GMap2
基礎對象的用法和地圖操作的基礎知識。
1.2 Google 地圖的“Hello, World”
開始學習 Google 地圖 API 最簡單的方式是看一個簡單的示例。下面的網頁顯示以北京的故宮博物院爲中心的 500x300 的地圖。
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src=http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false type="text/javascript"></script>
<script type="text/javascript">
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new Map2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
</script>
</head>
您可以查看此示例及下載、編輯和調試該示例，但必須將該文件中的密鑰替換爲您自己的 Google 地圖 API 密鑰。（如果註冊了特定目錄的密鑰，也可以將其用於所有子目錄。）
程序運行效果圖如下：
即使在此簡單的示例中，也需要注意五點：
- 使用 script 標籤包含 Google 地圖 API JavaScript。
- 創建名爲“map_canvas”的 div 元素來包含地圖。
- 編寫 JavaScript 函數創建“map”對象。
- 將地圖的中心設置爲指定的地理點。
- 從 body 標籤的 onLoad 事件初始化地圖對象。
1.2.1 加載 Google 地圖 API
<script src=http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false type="text/javascript">
</script>
http://ditu.google.cn/maps?file=api&v=2&key=abcdefg
網址指向包含使用 Google 地圖 API 所需所有符號和定義的 JavaScript 文件的位置。您的頁面必須包含指向此網址的
script 標籤，使用註冊 API 時收到的密鑰。在此示例中，該密鑰顯示爲“abcdefg”。
請注意，我們也傳遞 sensor 參數以指明此應用程序是否使用傳感器來確定用戶位置。在此示例中，我們將其設爲變量“true_or_false”以強調您必須顯式地將此值設置爲
true 或
false。
當地圖發佈時，必須使用發佈地圖的網址來註冊API，同時sensor
參數也必須明確指明true
或 false，否則地圖不能被加載。
1.2.2 地圖 DOM 元素
<div id="Div1" style="width: 500px; height: 300px"></div>
要讓地圖在網頁上顯示，必須爲其留出一個位置。通常，我們通過創建名爲
div 的元素並在瀏覽器的文檔對象模型 (DOM) 中獲取此元素的引用執行此操作。
在上述示例中，我們定義名爲“map_canvas”的
div，並使用樣式屬性設置其尺寸。地圖會自動使用容器尺寸調整自身的尺寸，除非使用構造函數中的
GMapOptions
顯式地爲地圖指定尺寸。
1.2.3 GMap2 - 基本對象
var map = new GMap2(document.getElementById("map_canvas"));
GMap2 類是表示地圖的 JavaScript 類。此類的對象在頁面上定義單個地圖。（可以創建此類的多個實例，每個對象將在頁面上定義一個不同的地圖。）我們使用 JavaScript new 操作符創建此類的一個新實例。
當創建新的地圖實例時，在頁面中指定一個 DOM 節點（通常是 div 元素）作爲地圖的容器。HTML 節點是 JavaScript document 對象的子對象，而且我們通過 document.getElementById() 方法獲得該元素的引用。
此代碼定義了一個變量（名爲 map），並將新 GMap2 對象賦值給該變量。函數 GMap2() 稱爲“構造函數”，其定義（在 Google 地圖 API 參考中簡述）如下所示：
|
構造函數 |
說明 |
|
GMap2(container, opts?) |
在通常是一個
DIV 元素的指定 HTML
|
請注意因爲 JavaScript 是鬆散類型的語言，我們可以不填寫構造函數的任何可選參數，此處也未這樣做。
1.2.4 初始化地圖
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
通過 GMap2 構造函數創建地圖後，我們需要再做一件事：將其初始化。初始化通過地圖的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 座標和縮放級別，而且必須先發送此方法，然後再在地圖上執行其他任何操作，包括設置地圖本身的其他任何屬性。
1.2.5 加載地圖
<body οnlοad="initialize()" οnunlοad="GUnload()">
當 HTML 頁面顯示時，文檔對象模型 (DOM) 即會擴展，接收其他外部圖像和腳本並將其合併到 document 對象中。爲確保我們的地圖僅放置在完全加載後的頁面上，我們僅在 HTML 頁面的 <body> 元素收到 onload 事件後才執行構造 GMap2 對象的函數。這樣做可以避免出現不可預期的行爲，並使我們可以對地圖繪製的方式和時間進行更多控制。
onload 屬性是事件處理程序的示例。Google 地圖 API 還提供了大量事件可以用來“監聽”狀態變化。請參閱地圖事件和事件監聽器以瞭解更多信息。
GUnload() 函數是用來防止內存泄漏的實用工具函數。
2正向標註
這裏指的正向標註，就是鼠標左鍵點擊地圖上某一個點，爲這個點添加一個標記，添加標記的同時，在地圖旁邊的數據列表中記錄這個標記的詳細信息，如：地區、經緯度等等。
API還提供從XMl文件中讀取座標點向地圖添加座標，使用這種方式可以用很少的時間向地圖批量添加標註。
默認標記如下圖所示：
正向標註所需要的技術：
|
執行順序 |
功能實現 |
所需技術 |
|
1 |
爲地圖添加click事件監聽器 |
Gmap2類 |
|
2 |
點擊地圖時取得經度、維度地理座標 |
GLatLng類 |
|
3 |
在得到的座標上添加標記 |
GMarker類 |
|
4 |
取得座標點的詳細地理信息（省、市、區） |
GClientGeocoder類 |
|
5 |
將座標點的詳細信息存入數據列表 |
谷歌可視化API |
|
6 |
讀取XML文件添加標註 |
GDownloadUrl 函數 |
|
7 |
地圖上添加的標記 |
GMarker 類 |
2.1 Map2類
對 GMap2 類進行實例化以創建地圖。這是 API 中的中心類。其他都是輔助類。
事件介紹
|
事件 |
說明 |
|
|
用戶用鼠標點擊地圖時會觸發此事件。根據所點擊的環境的不同以及是否點擊了可點擊的疊加層， |
2.2谷歌可視化API
Google 可視化 API 使您可以訪問您可以顯示的結構化數據的多個源（從大範圍可視化選擇範圍內選擇）。Google 可視化 API 還提供了一個可以用來創建、共享和重複使用開發人員社區詳細編寫的可視化內容的平臺。
谷歌可視化API的命名空間是google.visualization.*；
l DataTable：該DataTable對象是用來保存到一個可視化傳遞的數據。DataTable是一個基本的二維表。每一列的所有數據必須具有相同的數據類型。
l 如果您更改DataTable後，這些變化不會立即更改圖表。調用draw()反映任何變化。
2.3 GClientGeocoder 類
此類用於和 Google 服務器建立直接通信，以獲取用戶指定地址的地址解析。另外，地址解析器可維護自己的地址緩存，可以無需往返於服務器而回答重複的查詢。作爲常用的最佳做法，建議不要在迴路中使用 GClientGeocoder 函數。有多個地址要進行地址解析的開發人員或許應改爲使用我們的 HTTP 地址解析器。
構造函數
|
構造函數 |
說明 |
|
GClientGeocoder(cache?:GGeocodeCache) |
創建地址解析器的新實例，直接與 Google 服務器對話。可選的緩存參數允許指定已知地址的自定義客戶端緩存。如果未指定緩存，則使用 GFactualGeocodeCache。 （自 2.55 開始） |
方法
|
方法 |
返回值 |
說明 |
|
|
|
此方法向 Google 地址解析服務發送請求，要求該服務對指定的
（自 2.55 開始） |
3、有了數據表後，如果想讓數據表中的數據顯示到頁面上，需要將這個表綁定到一個頁面顯示列表上，還要爲這個列表添加一個行選擇事件偵聽器，用來響應“地圖反向標註”。
參考代碼如下：
function showAddress(response)
{
if (!response || response.Status.code != 200)
{
alert("Status Code:" + response.Status.code);
}
else
{
place = response.Placemark[0];
data.addRows(1);
var rwoCount = data.getNumberOfRows();
rwoCount = rwoCount - 1;
data.setCell(rwoCount, 0, rwoCount + 1);
data.setCell(rwoCount, 1, place.address);
data.setCell(rwoCount, 2, cLat);
data.setCell(rwoCount, 3, cLng);
++row_no;
visualization = new google.visualization.Table(
document.getElementById('table_canvas'));
visualization.draw(data, null);
google.visualization.events.addListener(
visualization, 'select', selectHandler);
var marker = createMarker(response);
marker.title = rwoCount + 1;
map.addOverlay(marker);
markers.push(marker);
markersResponse.push(response);
}
}
4、添加創建標註(GMarker)函數：
function createMarker(response)
{
var point = new GLatLng(cLat, cLng);
var marker = new GMarker(point);
var myHtml = "<b>orig latlng:</b>" + response.name + "<br/>" +"<b>Reverse Geocoded latlng:</b>" + place.Point.coordinates[1]
+ ","+ place.Point.coordinates[0] + "<br>" +"
<b>Status Code:</b>" + response.Status.code + "<br>" +"<b>Status Request:</b>"
+ response.Status.request + "<br>"
+ "<b>Address:</b>" + place.address + "<br>" +"<b>Accuracy:</b>" + place.AddressDetails.Accuracy
+ "<br>" + "<b>Country code:</b> " +place.AddressDetails.Country.CountryNameCode;
GEvent.addListener(marker, "click", function()
{
var selectRow = marker.title - 1;
visualization.setSelection([{ 'row': selectRow}]);
this.openInfoWindowHtml( myHtml);
});
return marker;
}
2.4 GMarker 類
GMarker 標記地圖上的位置。它實現 GOverlay 接口，因此可使用 GMap2.addOverlay() 方法添加到地圖中。
標記對象包含
latlng（這是標記在地圖中錨定的地理位置）和
icon。如果未在構造函數中設置
icon，則會使用默認圖標
G_DEFAULT_ICON。
將標記對象添加到地圖中後，通過標記可打開該地圖的信息窗口。標記對象會觸發鼠標事件和信息窗口事件。
構造函數
|
構造函數 |
說明 |
|
|
按 GMarkerOptions
中指定的選項在 |
方法
將標記添加到地圖中後，才能調用這些方法。
|
方法 |
返回值 |
說明 |
|
|
|
通過標記圖標打開地圖信息窗口。信息窗口的內容爲包含 HTML 文本的字符串。只適用於 GInfoWindowOptions.maxWidth 選項。 |
事件
只有當標記處於活動狀態時，纔會觸發上述所有事件（請參見構造函數）。
|
事件 |
說明 |
|
|
點擊標記圖標時會觸發此事件，從而通過其 |
|
|
在標記圖標上觸發 DOM mousedown
事件時會觸發此事件，從而通過其
|
|
|
在標記上觸發 DOM mouseup 事件時會觸發此事件，從而通過其
|
|
|
當鼠標進入標記圖標區域時會觸發此事件，從而通過其
|
|
|
當鼠標離開標記圖標區域時會觸發此事件，從而通過其
|
|
|
關閉通過此標記打開的地圖信息窗口時會觸發此事件。關閉信息窗口或在其他標記或在地圖上打開信息窗口時，都會觸發此事件。此事件在觸發前會觸發
|
2.5 GLatLng 類
GLatLng 是以經度和緯度表示的地理座標點。
請注意，儘管進行地圖投影時通常將經度與 x 座標相關聯，將緯度與 y 座標相關聯，但總是先填寫緯度座標，後填寫經度座標，因爲這符合繪圖習慣。
另請注意，不能修改 GLatLng 的座標。如果想要計算另一個點，必須新建一個。
構造函數
|
構造函數 |
說明 |
|
|
注意緯度和經度的順序。如果 |
2.6函數 GDownloadUrl
此函數提供一種便利方式，可異步檢索按網址標識的資源。請注意，由於 XmlHttpRequest 對象用於執行請求，因此它受跨站腳本的同源限制，即網址必須指向與當前執行此代碼的文檔的網址相同的服務器。因此，對
url
參數使用絕對網址通常是多餘的，最好僅使用絕對或相對路徑。處理拋出的任何異常（如安全錯誤）都是調用者的職責。
|
方法 |
返回值 |
說明 |
|
GDownloadUrl(url:String, onload:Function, postBody?:String, postContentType?:String) |
None |
從指定的網址中檢索資源，然後通過將文檔文本作爲第一參數、將 HTTP 響應狀態代碼作爲第二參數來調用 onload 函數。如果請求超時，則可將 null 作爲第一參數、-1 作爲第二參數調用 onload 函數。此函數在默認情況下會發送 HTTP GET 請求。要發送 HTTP POST 請求，請傳遞可選 postBody 參數中的數據。如果發送的數據的類型不是“application/x-www-form-urlencoded”，則將內容類型作爲字符串傳遞到 postContentType 參數中。此方法受跨站腳本限制。請注意，此方法使用瀏覽器的底層 XmlHttpRequest 實現。 |
2.7可拖動的標記
標記是可以點擊和拖動到新位置的交互式對象。在此示例中，我們將一個可拖動的標記放置在地圖上，並監聽它的幾個較簡單事件。可拖動標記通過實現以下四類事件來表示其拖動狀態：click、dragstart、drag
和 dragend。默認情況下，標記可點擊但不可拖動，所以它們需要通過將額外的標記選項
draggable
設置爲 true
來初始化。可拖動標記拖動結束後默認有彈跳效果。如果不喜歡這種效果，請將
bouncy
選項設置爲 false，標記會平緩放下。
var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(39.9493, 116.3975);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("彈起來了...");
});
map.addOverlay(marker);
2.8手動標註
本節介紹鼠標左鍵單擊地圖添加標記，並取得當前標記的座標，然後將信息添加到一個列表中，這個列表使用了谷歌可視化技術；最後爲地圖添加一個事件偵聽器，取得座標的詳細信息，也就是處理地址解析。
1、首先我們先來添加一個setupTable()函數，這個方法用來創建一個數據表，爲這個數據表添加4列，分別存儲“序號”、“地區”、“經度”、“緯度”，將此函數添加到initialize()函數中第一行的位置上，參考代碼如下：
function setupTable()
{
data = new google.visualization.DataTable();
data.addColumn('number', 'Sl. No');
data.addColumn('string', '地區');
data.addColumn('number', '緯度');
data.addColumn('number', '經度');
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table_canvas'));
visualization.draw(data, null);
}
2、爲地圖添加一個單擊事件偵聽，代碼如下：
geocoder = new GClientGeocoder();
GEvent.addListener(map, 'click', function(overlay, latlng)
{
if (latlng == null || typeof (latlng) == "undefined")
{
return;
}
var lat = latlng.lat();
var lon = latlng.lng();
cLat = lat;
cLng = lon;
geocoder.getLocations(latlng, showAddress);//地址解析
……
});
- 需要注意對latlng的判斷；
- 根據latlng取經、緯度；
2.9自動標註
自動標註是指通過程序實現在地圖上添加標註，這裏介紹通過隨機生成座標點添加標註和讀取XML文件中的座標點添加標註。
2.9.1隨機生成
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
// 在隨機位置向地圖中添加 10 個標記
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++)
{
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
}
<markers>
<marker lat="39.985" lng="116.588"/>
<marker lat="39.865" lng="116.688/"/>
<marker lat="39.945" lng="116.675"/>
<marker lat="39.972" lng="116.532"/>
</markers>
說明：
1. lat屬性表示 latitude緯度
2. lng 屬性表示 longitude經度
參考代碼如下：
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.000, 116.568), 11);
GDownloadUrl("XML/data.xml", function(data, responseCode)
{
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point, { draggable: true }));
}
});
}
}
3反向標註
反向標註就是通過選擇數據列表中的行，然後來判斷選中行中的數據是地圖上的哪個座標點，並且通過一個信息窗口來體現出來。
3.1從Marker到列表
當選中Marker時，對應的列表行將會被選中，顏色會改變，這裏稱之爲“行選中狀態”，這裏介紹一下通過代碼來實現行選中狀態的方法，此方法應用到當點擊了標註點時，在列表中選中該標記所在行，將該行設置爲“選中狀態”,要實現此功能需要給標註點添加一個click事件偵聽，然後調用visualization.setSelection方法。
參考代碼如下：
GEvent.addListener(marker, "click", function()
{
var selectRow = marker.title - 1;
visualization.setSelection([{ 'row': selectRow}]);
this.openInfoWindowHtml( myHtml);
});
visualization.setSelection([{ 'row': selectRow}]);此處代碼作用是整行變爲選中狀態。
程序運行效果如下
3.2從列表到Mark
要實現點擊列表的某一行，行對應的Marker提示信息，需要爲列表添加一個事件偵聽器，來響應列表行的選中事件，行選中狀態時，被選中行的顏色會改變，這一點在畫面上可以明顯的體現出來。
參考代碼如下：
google.visualization.events.addListener(visualization,'select', selectHandler);
function selectHandler()
{
var selection = visualization.getSelection();
var lat1;
var lng1;
for (var i = 0; i < selection.length; i++)
{
var item = selection[i];
if (item.row != null)
{
lat1 = data.getValue(item.row, 2);
lng1 = data.getValue(item.row, 3);
}
var point = new GLatLng(lat1, lng1);
for (var j = 0; j <= markers.length - 1; j++)
{
if (markers[j].getPoint().equals(point) == true)
{
map.panTo(point);
var place1 = markersResponse[j].Placemark[0];
var myHtml = "<b>orig latlng:</b>" + markersResponse[j].name + "<br/>" +
"<b>Reverse Geocoded latlng:</b>" + place1.Point.coordinates[1] + ","
+ place1.Point.coordinates[0] + "<br>" +
"<b>Status Code:</b>" + markersResponse[j].Status.code + "<br>" +
"<b>Status Request:</b>" + markersResponse[j].Status.request + "<br>" +
"<b>Address:</b>" + place1.address + "<br>" + "<b>Accuracy:</b>" + place1.AddressDetails.Accuracy + "<br>" + "<b>Country code:</b> " + place1.AddressDetails.Country.CountryNameCode;
markers[j].openInfoWindowHtml(myHtml);
break;
}
}
}
}
map.panTo(point);將地圖移動到標註點位置；
markers[j].openInfoWindowHtml(myHtml);在當前標註點提示氣泡。
4任意多邊形
可以使用GPolyline類繪製任意多邊形（包括不規則圖形），只需要將圖形的起點和重點設置爲同一個點即可完成一個封閉的圖形，繪製矩形同樣可以使用這個類。
4.1 GPolyline 類
這是一種使用瀏覽器的矢量製圖工具（如果可用）在地圖上繪製折線的地圖疊加層，或者是來自 Google 服務器的圖像疊加層。
構造函數
|
構造函數 |
說明 |
|
|
根據頂點數組創建折線。 |
方法
|
方法 |
返回值 |
說明 |
|
|
|
允許修改點的現有 GPolyline
鏈。如果啓用，則用戶可以選擇並拖動現有頂點。除非在
GPolyEditingOptions
中通過 |
|
|
|
返回折線中頂點的數目。（自 2.46 開始） |
|
|
返回折線中指定索引對應的頂點。（自 2.46 開始） |
|
|
|
返回此折線的邊界。 |
4.2 GLatLngBounds 類
GLatLngBounds 實例在地理座標中代表矩形，包括與 180 度子午線相交的矩形。
構造函數
|
構造函數 |
說明 |
|
根據西南角和東北角兩個點構建矩形。 |
方法
|
方法 |
返回值 |
說明 |
|
|
|
|
|
|
|
4.3矩形選擇
在地圖上繪製一個矩形，在結束繪製時（mouseup事件）將包含在矩形內的所有座標點顯示出來，然後將地圖平移到矩形的中心位置。使用GLatLngBounds類的containsLatLng方法判斷座標點是否在矩形內。
參考代碼如下：
var polyBounds = zoomAreaPoly.getBounds();
var centerPoint = polyBounds.getCenter(); //返回矩形的中心點
if (markers != null && markers.length > 0)
{
var newMarkers = [];
for (var i in markers)
{
if (polyBounds.containsLatLng(markers[i].getPoint()) == true)
{
newMarkers.push(markers[i]);
}
}
if (newMarkers.length > 0)
{
map.clearOverlays();
map.panTo(centerPoint);
markers = null;
markers = newMarkers;
for (var i in newMarkers)
{
map.addOverlay(markers[i]);
}
}
}
程序運行效果如下：
4.4可調的多邊形
這裏介紹使用Gpolyline類向地圖添加多邊形，使用Gpolyline繪製多邊形的原理是向地圖添加N個座標點，N >=3，把起點與終點設置爲同一個點，然後將這些點連接起來，這樣就可以繪製出一個多邊形。如果想讓多邊形變成可調整狀態，需要添加一個方法enableEditing。
這裏介紹從XML文件中讀取座標點來繪製多邊形。
XML文件格式如下：
<markers>
<marker lat="40.01920130768676" lng="116.39602661132812" name="1 中華人民共和國北京朝陽區"/>
<marker lat="40.012890779526174" lng="116.45782470703125" name="2 中華人民共和國北京朝陽區屏翠西路"/>
<marker lat="39.99290359080193" lng="116.5045166015625" name="3 中華人民共和國北京朝陽區東五環"/>
……. ……… ………
</markers>
從XML文件讀取數據（座標點），並將數據轉換爲GlatLng格式，
參考代碼如下：
var polygon;
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.000, 116.568), 10);
var markers = [];
var points = [];
GDownloadUrl("XML/drawDirection.xml", function(data, responseCode)
{
var xml = GXml.parse(data);
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
points.push(point);
}
getDirs(points);
});
}
function getDirs(points)
{
if (points)
{
polygon = new GPolyline(points);
polygon.enableEditing(); //允許修改點的現有 GPolyline 鏈
map.addOverlay(polygon);
}
}
}
程序運行效果如下：
4.4.1樣式設置
可以根據需要來修改多邊形的樣式。
參考代碼如下：
polygon = new GPolyline(points, "red", 10, 1, {geodesic :true});
程序運行效果如下：
4.4.2頂點數據獲取
這裏介紹如何將頂點數據寫入.txt文件,添加兩個函數，getPoints()，writeFile()。
1) getPoints()將所有頂點座標存入數組；
2) writeFile()將數組中的座標寫入文件。
參考代碼如下：
function getPoints()
{
var vertexC = polygon.getVertexCount();
var vertexs = [];
for (var i = 0; i < vertexC; i++)
{
vertexs.push(polygon.getVertex(i));
}
/**/
writeFile("vertex.txt", vertexs);
}
//寫文件
function writeFile(filename, filecontent)
{
var fso, f, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.OpenTextFile(filename, 8, true);
for (var i = 0; i < filecontent.length; i++)
{
var a = i + 1;
f.Writeline(a + " " + filecontent[i]);
}
f.Close();
}
4.5不可調的多邊形
不可調的多邊形創建方法與可調多邊形是一樣的，只是卻掉polygon.enableEditing() 屬性即可，詳細代碼請見 4.2 實例。這裏不做詳細介紹。
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.cn/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "http://www.google.cn/mapfiles/marker" + letter + ".png";
// Set up our GMarkerOptions object
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("標記 <b>" + letter + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}
5.1 GMarker添加文字
想爲GMarker添加文字，就需要定義一個新的類，這個類繼承GMarker，然後在這個新類中添加一個DIV，DIV.innerHTML的值就是用來顯示GMarker上面的文字。
首先定義一個 LabeledMarker類。
主要參考代碼如下：
LabeledMarker.prototype.initialize = function(map)
{
var div = document.createElement("div");
div.className = this.labelClass;
div.innerHTML = this.labelText; //重點
div.style.position = "absolute";
map.getPane(G_MAP_MARKER_PANE).appendChild(div);
if (this.clickable)
{
var eventPassthrus = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout'];
for (var i = 0; i < eventPassthrus.length; i++)
{
var name = eventPassthrus[i];
GEvent.addDomListener(div, name, newEventPassthru(this, name));
}
// Mouseover behaviour for the cursor.
div.style.cursor = "pointer";
}
this.map = map;
this.div = div;
};
然後在實例化LabeledMarker類時添加文字信息的參數。
point2, { labelText: label_text, labelClass: 'labeled_marker ' }
point2是座標參數，label_text是要顯示的文字，labeled_marker爲CSS樣式表。
參考代碼如下：
var label_text = "<div id='marker_" + ii
+ "' class='outer'><div class='inner'><nobr>"
+ ii + "<span class='michael' id='michael_" + ii + "' style='display:none'> - "+ point2.y + " " + point2.x + '</span></nobr></div></div>';
var mker = new LabeledMarker(point2, { labelText: label_text, labelClass: 'labeled_marker ' });
程序運行效果如下：
5.2添加滑動門效果
這裏要實現的滑動門效果就是當鼠標移動到標記上，圖標會向右展開來顯示裏面的內容，當鼠標離開標記時，標記會向左縮進，回覆原來的樣子。要實現這一技術，首先需要用到 DIV+CSS ，然後爲標記添加 mouseover，mouseout事件來控制圖片的伸展。
參考代碼如下：
var label_text = "<div id='marker_" + ii
+ "' class='outer'><div class='inner'><nobr>"
+ ii + "<span class='michael' id='michael_" + ii + "' style='display:none'> - "+ point2.y + " " + point2.x + '</span></nobr></div></div>';
這裏指定了< span >的 display:none屬性，默認讓它隱藏。
然後爲標記添加事件，參考代碼如下：
for (var j = 0; j < gmarkers.length; j++)
{
var mark = gmarkers[j];
GEvent.addListener(gmarkers[j], 'mouseover', Mover_(mark, j));
GEvent.addListener(gmarkers[j], 'mouseout', Mout_(mark, j));
}
function Mover_(marker,j)
{
return function()
{
if (isShowMe == true)
{
var name = "michael_" + j;
document.getElementById(name).style.display = "";
}
}
}
function Mout_(marker,j)
{
return function()
{
if (isShowMe == true)
{
var name = "michael_" + j;
document.getElementById(name).style.display = "none";
}
}
}
這段代碼指定了當鼠標移動到標記上時，就去掉< span >的 display:none屬性，
當鼠標離開標記時，再將< span >的 display:none屬性重新設置。這就達到了滑動門效果。
程序運行效果如下：
5.3自定義圖片無效果
在本章的開頭“自定義GMarker”已經介紹過了，這裏就不再重複。
6地圖控件與地圖屬性
控件概述
http://ditu.google.cn
上的地圖包含允許用戶與地圖交互的 UI 元素，這些元素稱爲“控件”。您可以在 Google 地圖 API 應用程序中添加這些控件的多種組合。您還可以通過子類化
GControl 類來構建自己的自定義控件。
地圖 API 帶有大量可以在地圖中使用的內置控件：
GLargeMapControl- 一個在 Google 地圖上使用的大平移/縮放控件。默認情況下顯示在地圖的左上角。GSmallMapControl- 一個在 Google 地圖上使用的小一點的平移/縮放控件。默認情況下顯示在地圖的左上角。GSmallZoomControl- 小型縮放控件（無平移控件），用於在 Google 地圖上顯示行車路線的小地圖彈出窗口。GScaleControl- 地圖比例尺GMapTypeControl- 讓用戶切換地圖類型（例如“地圖”和“衛星”）的按鈕GHierarchicalMapTypeControl- 用於放置多個地圖類型選擇器的一組精選的嵌套按鈕和菜單項。GOverviewMapControl- 位於屏幕一角的可摺疊概覽地圖。
所有這些控件都基於
GControl 對象。
GMapTypeControl
和 GHierarchicalMapTypeControl 是特殊情況，因爲它們還可以進行配置。這些控件增加的功能可以更改 Google 地圖 API 中的地圖當前所用的
GMapType。有關配置這些控件的詳細信息，請參見修改標準控件的結構。
下面是當前支持的地圖類型列表：
G_NORMAL_MAP顯示 Google 地圖默認的普通二維圖塊G_SATELLITE_MAP顯示拍攝的圖塊G_HYBRID_MAP同時顯示拍攝的圖塊和普通（突出顯示道路、城市名等明顯地圖特徵）圖塊G_PHYSICAL_MAP根據地形信息顯示實際地圖圖塊
如果您有圖像或者已經定義好的疊加層，也可以定義自己的自定義地圖類型。
默認情況下，Google 地圖 API 提供三種地圖類型：G_NORMAL_MAP、G_SATELLITE_MAP
和 G_HYBRID_MAP。您可以通過這兩種方式來改變地圖上可用的地圖類型：使用
GMap2.removeMapType() 刪除地圖類型；使用
GMap2.addMapType() 添加地圖類型。無論您何時創建地圖類型控件，它都使用當前地圖上已經添加的地圖類型，並通過控件讓用戶可以切換這些地圖類型。請注意，您必須在添加地圖類 型控件（主要指 GHierarchicalMapTypeControl）之前指定各地圖類型之間的階層關係，以便地圖類型控件可以準確反映這些關係。
使用下面的代碼可將
G_HYBRID_MAP 從添加到地圖上的可用地圖類型中刪除，只剩下兩種地圖類型。添加
GMapTypeControl 後，便只有這兩種地圖類型可用。
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(39.927, 116.407), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
7參考資料
谷歌Gmap API官方網站：
http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html
谷歌Gmap API官方論壇：
http://groups.google.com/group/google-maps-api-china/topics?start=160&sa=N
5自定義GMarker
GIcon
對象也有若干其他屬性，應對其進行適當設置，以便使您的圖標獲取最佳的瀏覽器兼容性和功能。例如，imageMap 屬性指定圖標圖像不透明部分的形狀。如果不在圖標中設置此屬性，則整個圖標圖像（包括透明部分）在
Firefox/Mozilla 中都將是可點擊的。有關詳細信息，請參閱 GIcon
類參考。
在許多情況下，圖標可以有不同的前景，但具有相同的形狀和陰影。最簡單的實現方式是使用
GIcon 類的構造函數“複製”已有的圖標（比如 G_DEFAULT_ICON，將其作爲 GIcon 的
copy 參數），它將複製該圖標所有的默認屬性，然後您可以對其進行自定義。
參考代碼如下：
