總覽
「地理圖」是國家/地區、大陸或區域地圖的地圖,包含指派給特定區域的顏色和值。值會以色階顯示,您可以為區域指定選用的懸停文字。系統會使用嵌入式 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 網站中的指示操作,解決這個問題。