資料層

透過集合功能整理內容 你可以依據偏好儲存及分類內容。
選取平台: Android iOS JavaScript

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

總覽

請觀看這部 DevBytes 影片,進一步瞭解資料層。

有了 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 類別會為您處理多邊形蜿蜒的情況。你可以傳送一或多個線性環形陣列 (定義為經緯度座標)。第一個線性環定義了多邊形的外邊界。如果您傳遞超過一個線性環,可以使用第二個和後續的線性環用於定義多邊形中的內部路徑 (孔)。

以下範例會建立矩形,其中含有兩個孔:

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const 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.
  const 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.
  const 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,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const 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.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const 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.
  const 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,
    ]),
  });
}

window.initMap = initMap;

載入 GeoJSON

GeoJSON 是在網路上共用地理空間資料的常見標準。這項工具的輕巧易讀,讓使用者輕鬆分享及協同合作。透過資料層,只要使用一行程式碼,您就能將 GeoJSON 資料新增至 Google 地圖。

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

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

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let 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"
  );
}

window.initMap = initMap;
查看範例

查看範例

GeoJSON 範例

本頁大部分的範例都是使用常見的 GeoJSON 檔案。此檔案將「Google」中的六個字元定義為澳洲的多邊形。在測試資料層時,歡迎複製或修改這個檔案。

注意:如要從其他網域載入 JSON 檔案,該網域必須啟用跨來源資源共用功能

展開 google.json 字詞旁的小箭頭,就能看到完整的檔案內容。

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

設定 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
});

宣告式樣式規則

如果您想更新大量疊加層的樣式 (例如標記或折線),通常必須先反覆繪製地圖上的各個疊加層,並分別設定樣式。透過資料層,您可以使用宣告方式設定規則,並套用至整個資料集。資料或規則更新時,樣式會自動套用至各項功能。您可以使用特徵屬性來自訂樣式。

舉例來說,以下程式碼會檢查 ascii 字元集的位置,以設定 google.json 中的每個字元的顏色。在這個範例中,我們已將字元位置與資料編碼。

// 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'});
});

呼叫 revertStyle() 方法以移除所有樣式覆寫。

樣式選項

每個功能的樣式設定選項會因功能類型而異。 例如,fillColor 只會在多邊形幾何圖形轉譯,而 icon 只會顯示在點幾何圖形上。詳情請參閱 StyleOptions 的參考說明文件。

適用於所有幾何圖形

  • clickable:如果為 true,此功能會接收滑鼠和觸控事件
  • visible:如果為 true,則代表系統顯示該功能。
  • zIndex:所有地圖項目皆按照 zIndex 的順序顯示在地圖上,值較高的值則會優先於值較小的地圖項目前面。標記一律顯示在行字串和多邊形的前方。

支援點幾何圖形

  • cursor:滑鼠遊標懸停時顯示在滑鼠遊標上。
  • icon:代表點幾何圖形的圖示。
  • shape:定義命中偵測的圖片對應。
  • title:滑鼠遊標懸停文字。

可在折線幾何圖形中使用

  • strokeColor:筆劃顏色。所有 CSS3 顏色皆受支援,但延伸已命名顏色除外。
  • strokeOpacity:筆劃透明度介於 0.0 到 1.0 之間。
  • strokeWeight:筆劃寬度 (以像素為單位)。

可用於多邊形幾何圖形

  • fillColor:填滿顏色。所有 CSS3 顏色皆受支援,但延伸已命名顏色除外。
  • fillOpacity0.01.0. 之間的填滿透明度
  • strokeColor:筆劃顏色。所有 CSS3 顏色皆受支援,但延伸已命名顏色除外。
  • strokeOpacity:筆劃透明度介於 0.0 到 1.0 之間。
  • strokeWeight:筆劃寬度 (以像素為單位)。

新增事件處理常式

功能回應事件,例如 mouseupmousedown。您可以新增事件監聽器,讓使用者與地圖上的資料互動。在以下範例中,我們新增滑鼠遊標懸停事件,會在遊標下方顯示功能相關資訊。

// 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();
});