您已全部設定完成！

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

啟用 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({});

這樣會移除您指定的所有自訂樣式，而那些特徵會改為使用預設樣式轉譯。如果您想改為不再轉譯特徵，請將 StyleOptions 的 visible 屬性設定為 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.0 和 1.0 之間。
  • strokeColor：筆觸色彩。支援所有 CSS3 色彩，延伸的具名色彩除外。
  • strokeOpacity：筆觸不透明度介於 0.0 和 1.0 之間。
  • strokeWeight：筆觸寬度（以像素為單位）。

新增事件處理常式

特徵會回應事件，例如 mouseup 或 mousedown。您可以新增事件接聽程式以允許使用者與地圖上的資料互動。在下面的範例中，我們新增一個 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
產品意見
需要協助嗎？請前往我們的支援網頁。