您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

資料圖層

Google 地圖資料圖層提供容納任意地理空間資料的容器。您可以使用資料圖層來在 Google 地圖上儲存您的自訂資料,或顯示 GeoJSON 資料。

總覽

觀賞此 DevBytes 影片以深入瞭解資料圖層。

透過 Google Maps JavaScript API,您可以使用各種疊加層 (例如標記、折線、多邊形等等) 為地圖加上標記。每種註解都會合併樣式資訊和位置資料。google.maps.Data 類別是一個可容納任意地理空間資料的容器。與其新增這些疊加層,您可以使用資料圖層在地圖上新增任意的地理資料。如果該資料包含幾何圖形,例如點、線或多邊形,API 預設會將這些幾何圖形轉譯為標記、折線和多邊形。您可以像對一般疊加層一樣對這些特徵設定樣式,或者根據資料集所包含的其他屬性套用樣式規則。

google.maps.Data 類別可讓您:

  • 在地圖上繪製多邊形。
  • 將 GeoJSON 資料新增至地圖。
    GeoJSON 是在網際網路使用地理空間資料的標準。Data 類別的資料表示方式是依照 GeoJSON 的結構,因此能夠更容易地顯示 GeoJSON 資料。使用 loadGeoJson() 方法可以輕鬆匯入 GeoJSON 資料,以及顯示點、線和多邊形。
  • 使用 google.maps.Data 以建構任意資料模型。
    大多數真實世界的實體都有與其相關聯的其他屬性。例如,商店有營業時間、道路有速限,就連每個義賣的女童軍也都有自己的銷售地盤。透過 google.maps.Data,您可以對模擬這些屬性,並且據此為您的資料設定樣式。
  • 選擇如何呈現您的資料,並隨時變更您的想法
    資料圖層可讓您決定資料的視覺效果和互動方式。例如,在地圖上查詢便利商店時,您可以選擇只顯示有販賣大眾運輸車票的商店。

繪製多邊形

Data.Polygon 類別可為您處理多邊形捲繞。您可以傳入一或多個以緯度/經度座標定義的線環陣列。第一個線環會定義多邊形的外部邊界。如果您傳入多個線環,則第二個之後的線環會定義多邊形中的內部路徑(孔洞)。

下列範例會建立其中有兩個孔洞的矩形多邊形:

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<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>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

檢視範例

載入 GeoJSON

GeoJSON 是一種在網際網路分享地理空間資料的常用標準。它非常輕便且可供人們輕鬆閱讀,所以很適合用在分享和協作上。有了資料圖層,只需要一行程式碼,就可以在 Google 地圖新增 GeoJSON 資料。

map.data.loadGeoJson('google.json');

每個地圖都有一個 map.data 物件,做為任意地理空間資料(包括 GeoJSON)的資料圖層。您可以呼叫 data 物件的 loadGeoJSON() 方法,以載入和顯示 GeoJSON 檔案。下列範例示範如何新增地圖並載入外部的 GeoJSON 資料。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<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>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

檢視範例

範例 GeoJSON

此頁面大部分的範例都使用常見的 GeoJSON 檔案。這個檔案在澳洲上面將「Google」的六個字元定義為多邊形。您可以任意複製或修改這個檔案來測試資料圖層。

注意:如果要從其他網域載入 json 檔案,該網域必須已啟用跨來源資源共享

展開 google.json 旁邊的小箭頭,即可在下面看見檔案的完整文字。

設定 GeoJSON 資料樣式

使用 Data.setStyle() 方法可指定您的資料外觀。setStyle() 方法可接受 StyleOptions 物件常值,或是計算每個特徵樣式的函式。

簡單的樣式規則

設定特徵樣式最簡單的方式是將 StyleOptions 物件常值傳遞至 setStyle()。這些物件常值會為集合中的每個特徵設定一種樣式。請注意,每個特徵類型只能轉譯一組可用的選項。這表示可以合併一個物件常值中不同特徵類型的樣式。例如,下面的片段同時設定自訂的 icon (只影響點的幾何圖形)和 fillColor (只影響多邊形)。

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

如需有效樣式/特徵組合的更多資訊,請參閱樣式選項

下面範例使用 StyleOptions 物件常值設定多個特徵的筆觸和填滿色彩。注意每個多邊形的樣式都是相同的。

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

檢視範例

宣告的樣式規則

如果想要大量更新疊加層(例如標記或折線)的樣式,通常必須重複處理地圖上的每個疊加層,然後分別設定樣式。但是有了資料圖層,您就可以宣告規則,然後將這些規則套用到整個資料集。而當資料或規則更新時,樣式也會自動套用到每個特徵。您可以使用特徵屬性自訂其樣式。

例如,下面的程式碼會檢查 google.json 中每個字元在 ASCII 字元集中的位置,來設定每個字元的顏色。在這個情況下,我們就等於是將字元位置連同資料一起編碼。

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

移除樣式

如果您想要移除任何套用的樣式,請將空的物件常值傳遞至 setStyles() 方法。

// Remove custom styles.
map.data.setStyle({});

這樣會移除您指定的所有自訂樣式,而那些特徵會改為使用預設樣式轉譯。如果您想改為不再轉譯特徵,請將 StyleOptionsvisible 屬性設定為 false

// Hide the Data layer.
map.data.setStyle({visible: false});

覆寫預設樣式

樣式規則通常會套用到資料圖層中的每個特徵。不過,有時候您也許會想要對特定特徵套用特殊樣式。例如,在點選時醒目顯示特徵。

如果要套用特殊的樣式規則,請使用 overrideStyle() 方法。除了 setStyle() 中已經指定的全域樣式之外,還會套用您使用 overrideStyle() 方法變更的任何屬性。例如,下面的程式碼會變更多邊形在點選時的填滿色彩,但不會設定任何其他樣式。

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

呼叫 revertStyles() 方法可移除所有覆寫的樣式。

樣式選項

每個特徵可設定樣式的選項將取決於該特徵的類型。例如,fillColor 只會在多邊形的幾何圖形上轉譯,而 icon 只會在點的幾何圖形上顯示。如需更多資訊,請參閱 StyleOptions 的參考文件。

可在所有幾何圖形上使用

  • clickable:如果為 true,特徵會收到滑鼠和輕觸事件
  • visible:如果為 true,特徵將可見。
  • zIndex:所有特徵會以其 zIndex 的順序在地圖上顯示,數值較高的特徵會顯示在數值較低的特徵前面。標記會永遠顯示在線段和多邊形前面。

可在點的幾何圖形上使用

  • cursor:滑鼠指標位於上方時將會顯示。
  • icon:對點的幾何圖形顯示的圖示。
  • shape:定義用來偵測點擊的影像地圖。
  • title:變換文字。

可在線的幾何圖形上使用

  • strokeColor:筆觸色彩。支援所有 CSS3 色彩,延伸的具名色彩除外。
  • strokeOpacity:筆觸不透明度介於 0.0 和 1.0 之間。
  • strokeWeight:筆觸寬度(以像素為單位)。

可在多邊形的幾何圖形上使用

  • fillColor:填滿色彩。支援所有 CSS3 色彩,延伸的具名色彩除外。
  • fillOpacity:填滿不透明度介於 0.01.0 之間。
  • strokeColor:筆觸色彩。支援所有 CSS3 色彩,延伸的具名色彩除外。
  • strokeOpacity:筆觸不透明度介於 0.0 和 1.0 之間。
  • strokeWeight:筆觸寬度(以像素為單位)。

新增事件處理常式

特徵會回應事件,例如 mouseupmousedown。您可以新增事件接聽程式以允許使用者與地圖上的資料互動。在下面的範例中,我們新增一個 mouseover 事件,顯示滑鼠游標下方特徵的相關資訊。

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

資料圖層事件

所有特徵都時常使用下列事件,無論它們的幾何類型為何:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

如需關於這些事件的詳細資訊,請參閱 google.maps.data 類別的參考文件。

動態變更外觀

您可以將計算每個特徵樣式的函式傳遞至 google.maps.data.setStyle() 方法來設定資料圖層的樣式。每次特徵的屬性更新時,就會呼叫此函式。

下列範例中,我們針對更新特徵的 isColorful 屬性的 click 事件,新增事件接聽程式。在屬性設定完畢後,特徵樣式便會更新以反映變更。

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

檢視範例

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁