簡介
「地理區域地圖」是國家/地區、洲別或地區地圖的地圖,其中顏色和值會指派給特定區域。顯示的值會以色彩比例顯示,您也可以為地區指定選用的遊標懸停文字。地圖使用內嵌的 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 網站。