總覽
「地理圖」是國家/地區、大陸或區域地圖的地圖，包含指派給特定區域的顏色和值。值會以色階顯示，您可以為區域指定選用的懸停文字。系統會使用嵌入式 Flash 播放器在瀏覽器中呈現地圖。請注意，地圖無法捲動或拖曳，但可以設為允許縮放。
示例
這裡有兩個範例：一個使用區域顯示樣式，另一個使用標記顯示樣式。
區域範例
區域樣式會填滿整個區域 (通常是國家/地區)，並採用與指派值相對應的顏色。在程式碼中指派 options['dataMode']
= 'regions'，即可指定區域樣式。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
標記範例
「標記」樣式會在您指定的區域中，顯示大小和顏色的圓形 (代表該值)。
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['New York', 200],
['Boston', 300],
['Miami', 400],
['Chicago', 500],
['Los Angeles', 600],
['Houston', 700]
]);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
載入中
google.charts.load 套件名稱為 "geomap"
google.charts.load('current', {'packages': ['geomap']});
地理區域圖視覺化類別名稱為 google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
資料格式
系統支援兩種位址格式，每種格式都支援不同數量的資料欄，以及每個資料欄的資料類型。表格中的所有位址都必須使用其中一種，不得混合使用類型。
- 格式 1：緯度/經度位置。只有在
dataMode選項為「標記」時，才能使用這種格式。如果使用這種格式，就不必加入 Google 地圖 JavaScript。地點有兩個欄位，加上兩個選用資料欄：- [數字，必要] 緯度。正數為正數，負數是南北數。
- [數字，必要] 經度。正數為正數，負數為正數。
- [數字，選用] 使用者將滑鼠遊標懸停在這個區域時顯示的數值。如果使用第 4 欄，就屬於必要資料欄。
- [字串，選用] 使用者將滑鼠遊標懸停在這個區域時顯示的其他字串文字。
- 格式 2：地址、國家/地區名稱、區域名稱位置或美國都會區碼。這種格式可搭配設定為「標記」或「區域」的
dataMode選項使用。位置會輸入至一個資料欄，並加上兩個選用資料欄：- [字串，必要] 地圖位置。系統接受下列格式：
- 特定地址 (例如「臺北市南投區」)。
- 以字串表示的國家/地區名稱 (例如「英格蘭」)、大寫的 ISO-3166 代碼或英文的對應英文文字 (例如「GB」或「United Kingdom」)。
- 大寫的 ISO-3166-2 區域代碼名稱或相應的英文文字代碼 (例如「US-NJ」或「New Jersey」)。注意：只有在 dataMode 選項設為「regions」時，才能指定區域。
- 「都會區區碼」。這些是三位數的都會區代碼，用於指定多個區域；僅支援美國代碼。請注意，這組號碼不與電話區碼相同。
- [數字，選用] 使用者將滑鼠遊標懸停在這個區域時顯示的數值。如果使用第 3 欄，就屬於必要資料欄。
- [字串，選用] 使用者將滑鼠遊標懸停在這個區域時顯示的其他字串文字。
- [字串，必要] 地圖位置。系統接受下列格式：
注意：每張地圖最多可顯示 400 個項目；如果您的 DataTable 或 DataView 包含超過 400 列，則地圖只會顯示前 400 個。最快的模式為 dataMode='regions'，指定以 ISO 代碼表示的地點，dataMode='markers' 則具有經緯度項目。最慢的模式是 dataMode='markers' (包含字串位址)。
重要事項：您的 DataTable 必須包含在您要使用的任何欄前方。舉例來說，如果您想指定經緯度資料表，而且只想使用第 1、2 和 4 欄，則 DataTable 仍必須定義欄 3 (但您不需要加入任何值)：
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
設定選項
| 名稱 | 類型 | 預設 | 說明 |
|---|---|---|---|
region |
字串 | 「world」 | 地圖上要顯示的區域。(同時也會顯示圍繞區域)。可以是國家/地區代碼 (ISO-3166 格式)，或是下列任一字串：
地理區域圖不支援捲動或拖曳行為，且只有有限的縮放行為。您可以設定 |
dataMode |
字串 | 「regions」 | 如何在地圖上顯示值。可支援兩個值： |
width |
字串 | 「556 像素」 | 視覺呈現的寬度。如未指定單位，預設單位為像素。 |
height |
字串 | 「347 像素」 | 視覺化內容的高度。如未指定單位，預設單位為像素。 |
colors |
RGB 數字陣列，格式為 0xRRGGBB | [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] | 要在圖表中指派給值的顏色漸層。您必須至少有兩個值：漸層包含您所有的值以及計算出的中間值，最淺的顏色代表最小，最深的顏色代表最高。 |
showLegend |
boolean | true | 如果為 true，會顯示地圖的圖例。 |
showZoomOut |
boolean | false | 如為 true，則顯示含有 zoomOutLabel 屬性指定標籤的按鈕。請注意，按下這個按鈕時不會執行任何動作，但會擲回 zoomOut 事件。如要處理縮放作業，請擷取此事件並變更 region 選項。只有在 region 選項小於世界檢視畫面時，您才能指定 showZoomOut。其中一種啟用放大行為的方法之一，是監聽 regionClick 事件，將 region 屬性變更為適當的區域，然後重新載入地圖。 |
zoomOutLabel |
字串 | 縮小 | 縮放按鈕的標籤。 |
方法
| 方法 | 傳回類型 | 說明 |
|---|---|---|
draw(data, options) |
無 | 繪製地圖。可在繪圖完成前返回 (請參閱 drawingDone() 事件)。 |
getSelection() |
選取元素陣列 | 標準 getSelection() 實作。所選元素為資料列。只有在 dataMode 選項為「地區」時，這個方法才有效。您只能選取有指派值的區域。 |
setSelection(selection) |
無 | 標準 setSelection() 實作。將所選內容視為資料列選取項目，並支援多列選取功能。只能選取有指派值的區域。 |
事件
| 名稱 | 說明 | 屬性 |
|---|---|---|
error |
嘗試算繪圖表時發生錯誤時觸發。 | id、message |
select |
在使用者點選有指定值的區域時觸發。如要瞭解您選取的項目，請呼叫 注意：由於某些限制，如果您在瀏覽器中以檔案形式存取網頁 (例如 |
無 |
regionClick |
點按區域時呼叫。同時適用於「區域」和「標記」 注意：由於某些限制，如果您透過瀏覽器存取網頁 (例如 |
具有單一屬性 region 的物件，該屬性為 ISO-3166 格式的字串，用來描述使用者點選的地區。 |
zoomOut |
在使用者按下縮小按鈕時呼叫。如要處理縮放，請擷取此事件並變更 注意：由於某些限制，如果您在瀏覽器中以檔案形式存取網頁 (例如 |
無 |
drawingDone |
地理圖完成繪製時呼叫。 | 無 |
資料政策
Google 地圖會為地點進行地理編碼。不需要地理編碼的資料不會傳送至任何伺服器。如要進一步瞭解資料政策，請參閱《Google 地圖服務條款》。
注意事項
由於 Flash 安全性設定，當從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 而非網路伺服器網址 (例如 http://www.myhost.com/myviz.html) 存取時，此 (和所有 Flash 視覺呈現) 可能無法正常運作。這通常只是測試問題。你可以按照 Macromedia 網站中的指示操作，解決這個問題。