注意：Fusion Table 圖層是實驗性質。
Fusion Table 圖層能轉譯 Google Fusion Table 中包含的資料。
總覽
Google Maps JavaScript API 可讓您使用 FusionTablesLayer 物件，將 Google Fusion Tables 中所包含的資料轉譯為地圖上的圖層。Google Fusion Table 是一個資料庫表格，其中每個列都包含特定地圖項目的資料；如果是地理資料，Google Fusion Table 內的每個列會額外包含位置資料，保存地圖項目的位置資訊。FusionTablesLayer 提供存取 Fusion Table 的介面，並且支援自動轉譯此位置資料，提供可點選的疊加層以顯示地圖項目的額外資料。
下面是顯示地理資料的範例 Fusion Table：
限制
您可以使用 Google Maps JavaScript API 在地圖上新增最多五個 Fusion Tables 圖層，每個圖層最多可以使用五個樣式規則設定樣式。
此外：
- 表格中只有前 100,000 筆資料列會對應或包含在查詢結果中。
- 有空間述詞的查詢只會傳回這前 100,000 列以內的資料。所以，如果您對非常大的表格套用篩選，而篩選符合前 100K 列以後的資料，就不會顯示這些列。
- 匯入或插入資料時，請記住：
- 一個 API 呼叫所傳送的資料總大小不能超過 1MB。
- Fusion Table 中的一個資料儲存格最多只能有一百萬個字元；因此有時候必須減少座標的精確度或簡化多邊形或線段的描述。
- 每個表格最多只能有五百萬個頂點。
- 查看地圖時，您會發現：
- 如果有多個幾何圖形，則會顯示十個最大區域的部分。
- 拉得比較遠時，超過 500 個地圖項目的表格會顯示點（而非線或多邊形）。
Fusion Table 設定
Fusion Table 是提供內建地理資料支援的資料表格。如需詳細資訊，請參閱關於 Fusion Tables。如果要讓 Fusion Table 圖層在 Google 地圖上顯示 API 內的資料，表格必須滿足下列條件：
- 表格必須以 Public 或以 Unlisted 共用。
- 表格必須有一或多個以
Location顯示的欄。在 Fusion Table Web 介面中，選取 [Edit] > [Modify Columns] 並選取想要的欄。
Location 欄必須依照下列要求。
- 緯度/經度座標可以逗號分隔輸入一欄 (緯度,經度)，或者分成兩欄（一欄是緯度，一欄是經度）。如需更多資訊，請參閱 Fusion Table 文件。
- 地址必須先進行地理編碼。在 Fusion Table Web 介面中，選取 [File] > [Geocode]。
- 支援如點、線和多邊形這類 KML 幾何資料。
建構 FusionTables 圖層
FusionTablesLayer 建構函式使用表格的「Encrypted ID」從公用的 Fusion Table 建立圖層，您可以在 Fusion Table UI 中選取 [File] > [About] 找到這個 ID。
若要在地圖上新增 Fusion Table 圖層，請建立圖層，傳遞 query 物件搭配下列項目：
select屬性，其值是包含位置資訊的欄名稱。包含空格、保留字或不是以字母開頭的欄名稱都必須加上引號。from屬性，其值可以是「Encrypted ID」。
然後，將圖層的 map 設定為您的 Map 物件，就像其他疊加層一樣。
注意：舊版 Google Maps JavaScript API 透過數值 ID 引用 Fusion Tables。雖然這個方法仍然有用，但最好還是使用已加密 ID。
下列範例使用公用的 Fusion Table 顯示 2009 年芝加哥的殺人案：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
Fusion Table 查詢
您也可以對 Fusion Table 套用功能強大的查詢，將結果限制為指定的條件。查詢使用 FusionTablesLayerOptions query 參數指定：
query: {
select: locationColumn,
from: fusionTableID,
where: constraintClause
}
其中 locationColumn 是一個 Location 類型的現有地理編碼欄。在 select 或 where 欄位中包含空格、保留字或不是以字母開頭的欄名稱都必須加上引號。
Fusion Table 文件中列出支援的搜尋運算子。
下列範例示範芝加哥捷運紅線沿線平日超過 5000 個乘車人次的位置：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.948766, lng: -87.691497},
zoom: 12
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'address',
from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
where: 'ridership > 5000'
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.948766, lng: -87.691497},
zoom: 12
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'address',
from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
where: 'ridership > 5000'
}
});
layer.setMap(map);
}
Fusion Table 樣式
Fusion Table 圖層建構函式也接受 FusionTablesLayerOptions styles 參數，對線和多邊形套用顏色、筆觸粗細和不透明度。從支援的地圖標記或圖示名稱也能指定標記圖示。
注意：樣式只能套用到每個地圖的一個 Fusion Table 圖層。最多可以對該圖層套用五個樣式。
styles 參數使用下列語法：
styles: [{
where: 'column_name condition',
markerOptions: {
iconName: "supported_icon_name"
},
polygonOptions: {
fillColor: "#rrggbb",
strokeColor: "#rrggbb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int" }
}, {
where: ...
...
}]
樣式會套用在 Fusion Table Web 介面中已指定的所有樣式之上。提供給圖層建構函式的樣式會以列出的順序套用，符合多個規則的地圖項目則使用最後一個符合的樣式。
若要建立一個預設樣式套用到所有地圖項目，建立樣式時請不要使用 where 子句：
styles: [{
markerOptions: {
iconName: "large_green"
}
}]
下列範例示範：
- 將所有多邊形塗成綠色，不透明度為 0.3 的預設樣式。
- 將 ‘birds’ 欄超過 300 的所有多邊形都塗成藍色。保留預設樣式所設定的不透明度。
- 將 ‘population’ 欄超過 5 的所有多邊形的不透明度設定為 1.0。它們會保留其 fillColor 值。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -25, lng: 133},
zoom: 4
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}, {
where: 'birds > 300',
polygonOptions: {
fillColor: '#0000FF'
}
}, {
where: 'population > 5',
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -25, lng: 133},
zoom: 4
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}, {
where: 'birds > 300',
polygonOptions: {
fillColor: '#0000FF'
}
}, {
where: 'population > 5',
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
}
Fusion Table 熱度圖
Fusion Table 也部分支援「熱度圖」，熱度圖是使用顏色描繪相符位置的密度。目前的熱度圖使用紅色（緻密）到綠色（稀疏）漸層，表示相關位置相對的盛行程度。您可以將圖層的 FusionTablesLayerOptions heatmap 參數設定為 enabled: true 啟用熱度圖。
注意：Fusion Table 熱度圖會在伺服器端轉譯。如果您想要用戶端的熱度圖，請改用熱度圖圖層。
下列範例使用熱度圖示範歷史上的地震資料：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10, lng: -140},
zoom: 3
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10, lng: -140},
zoom: 3
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
需要協助嗎？請前往我們的