簡介
「地理區域地圖」是國家/地區、洲別或地區地圖的地圖，其中顏色和值會指派給特定區域。顯示的值會以色彩比例顯示，您也可以為地區指定選用的遊標懸停文字。地圖使用內嵌的 Flash Player 在瀏覽器中顯示。請注意，地圖無法捲動或拖曳，但可設為允許縮放。
示例
地區範例
區域樣式會依照您指定的值填入整個區域 (通常是國家/地區)。在程式碼中指派 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 欄，就必須填寫此欄。
- [String, 非必要] 當使用者將滑鼠遊標懸停在這個區域時，會顯示其他字串文字。
- 格式 2：地址、國家/地區名稱、區域名稱位置或美國都市區碼。此格式適用於
dataMode選項，可設為「Markers」或「regions」。這個位置會填入一個資料欄，另外有兩個選用資料欄：- [字串，必填] 地圖位置。可使用以下格式：
- 特定地址 (例如「臺北市信義區信義路五段 7 號」)。
- 以字串表示的國家/地區名稱 (例如「英格」) 或大寫字母 ISO-3166，或是其對應的英文文字 (例如「GB」或「英國」)。
- 大寫的 ISO-3166-2 區域名稱，或是其對應的英文文字 (例如「US-NJ」或「New Jersey」)。附註：只有在 dataMode 選項設為「regions」時，才能指定區域。
- 「都市區碼」。這些是一組 3 位數的都會區代碼，用來指定不同地區；僅支援美國代碼。請注意，這些代碼與電話區碼不相同。
- [數字，選用] 使用者將滑鼠遊標懸停在這個地區時出現的數值。如果使用第 3 欄，就必須填寫這一欄。
- [String, 非必要] 當使用者將滑鼠遊標懸停在這個區域時，會顯示其他字串文字。
- [字串，必填] 地圖位置。可使用以下格式：
注意事項：一張地圖最多只能顯示 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 |
string | 世界 | 要在地圖上顯示的區域。(也會顯示週邊區域)。可以是國家/地區代碼 (使用大寫 ISO-3166 格式)，或是下列任一字串：
地理對應無法啟用捲動或拖曳行為，而且只能使用有限的縮放行為。設定 |
dataMode |
string | 區域 | 如何在地圖上顯示值。系統支援兩個值： |
width |
string | 「556 像素」 | 視覺圖表的寬度。如未指定單位，則預設單位為像素。 |
height |
string | 347 像素 | 視覺呈現的高度。如未指定單位，則預設單位為像素。 |
colors |
RGB 號碼陣列，格式為 0xRRGGBB | [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] | 要在視覺圖表中指派給值的色彩漸層。您必須提供至少兩個值；梯度會包含所有值加上計算過的中繼值，其中最低顏色是最小值，而深色顏色則最高。 |
showLegend |
布林值 | true | 如為 true，則顯示地圖的圖例。 |
showZoomOut |
布林值 | 否 | 如為 true，則顯示包含 zoomOutLabel 屬性指定的標籤的按鈕。請注意，此按鈕在點選時不會執行任何動作，只擲回 zoomOut 事件。
如要處理縮放，請擷取此事件並變更 region 選項。只有在 region 選項小於世界視圖時，您才能指定 showZoomOut。啟用放大行為的其中一種做法是監聽 regionClick 事件，將 region 屬性變更為適當的區域，然後重新載入地圖。 |
zoomOutLabel |
string | [縮小] | 縮放按鈕的標籤。 |
方法
| 方法 | 傳回類型 | 說明 |
|---|---|---|
draw(data, options) |
無 | 繪製地圖。可在繪圖完成前返回 (請參閱 drawingDone() 事件)。 |
getSelection() |
所選元素的陣列 | 標準 getSelection() 實作。所選元素是資料列。只有在 dataMode 選項為「regions」時，這個方法才有效。您只能選取具有指定值的地區。 |
setSelection(selection) |
無 | 標準 setSelection() 實作。將選取項目視為資料列選取項目，並支援多個資料列選項。只能選取有指定值的區域。 |
活動
| 名稱 | 說明 | 屬性 |
|---|---|---|
error |
嘗試轉譯圖表時發生錯誤。 | id、message |
select |
使用者點選具有指定值的地區時，就會觸發這個事件。如要瞭解所選項目，請呼叫 注意：基於某些限制，如果您在瀏覽器中以網頁的形式存取網頁，
|
無 |
regionClick |
在點選區域時呼叫。適用於「區域」和「標記」 注意：由於某些限制，如果您在瀏覽器中以網頁的形式存取網頁 (例如「file://」) 而非伺服器 (例如：「http://www」)。 |
具有單一屬性 region 的物件，這是以 ISO-3166 格式表示的字串，且說明點擊區域。 |
zoomOut |
在點按縮小按鈕時呼叫。如要處理縮放，請擷取此事件並變更 注意：基於某些限制，如果您在瀏覽器中以網頁的形式存取網頁，
|
無 |
drawingDone |
在地理圖完成繪製時呼叫。 | 無 |
資料政策
Google 地圖會對地點進行地理編碼。凡是不需要地理編碼的資料，都不會傳送至任何伺服器。 相關詳情請參閱《Google 地圖服務條款》。
注意事項
由於 Flash 安全性設定，因此，從瀏覽器的檔案位置 (例如 file:///c:/webhost/myhost/myviz.html) 存取網頁，而非透過網路伺服器網址 (例如 http://www.myhost.com/myviz.html) 存取時，此程式碼 (以及所有 Flash 型視覺呈現) 可能無法正常運作。這通常是測試問題。如要解決這個問題，請前往 Macromedia 網站。