2D 資訊方塊總覽

藍圖範例地圖圖塊只是世界的劃分區域，成為已編入索引的格線。能讓您以有效率的方式，以多種方式動態存取及使用地圖資料。Map Tiles API 可讓您存取多個主題的地理資料集，包括 Google 收錄的地理資料集：

  • 路線圖圖像圖塊是以向量地形資料為基礎，搭配 Google 製圖樣式。

  • 由衛星和航空攝影機拍攝的雕刻攝影，用途是傳送地球上下 (天底) 的圖像。

  • 希爾沙德輪廓地圖。

2D 地圖圖塊全都經過地理參照，彼此對齊。是根據可視區域的地理範圍和縮放等級所選取。縮放等級範圍從 0 (檢視整個世界) 到 22 (查看街道和街區)，

地圖主題

你可以取得下列地圖主題的地圖圖塊。

地圖主題 說明
藍圖 道路、建築物、搜尋點和政治界線
衛星 從太空拍攝的照片
地形 顯示植被等自然地圖項目的輪廓地圖

如要透過 Map Tiles API 要求地圖圖塊，您必須先請求工作階段符記。工作階段符記會追蹤地圖和可視區域目前的狀態。設定工作階段符記時，必須設定 mapType 值，使其與所需的地圖主題相符。接著，您必須在每個傳送至 Maps Tiles API 的要求中，加入工作階段符記。

可視區域資訊要求

可視區域可定義用來框住世界場景的方塊大小。可視區域資訊要求會傳回構成目前可視區域地圖圖塊的詳細資料。之所以要求您要求可視區域資訊，是為了確保您不會要求存取不存在的縮放等級。

舉例來說，大多數城市的圖像縮放等級是 22 而非海洋，因為最終只會顯示無地圖項目的藍色方塊。

可視區域要求是採用下列格式的 HTTPS GET 要求。

curl "https://tile.googleapis.com/tile/v1/viewport?session=YOUR_SESSION_TOKEN&key=YOUR_API_KEY&zoom=zoom&north=north&south=south&east=east&west=west"

這個要求包含下列欄位：

zoom
可視區域的縮放等級。
north、south、east、west
可視區域內的最北、南、東和西點，以度為單位。北部和南部必須在範圍 (-90,90) 內，東西向和西部必須介於範圍 (-180, 180)。如要表示跨越子午線的邊界，西部可以是正數 (例如 170)，而 east 可以是負數 (例如 -170)。所有參數皆為必填。

可視區域資訊回應

可視區域回應會顯示哪些區域有圖像和縮放等級。可視區域資訊回應格式如下。

{
  "copyright": "Map data ©2023",
  "maxZoomRects": [
    {
      "maxZoom": 19,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 9,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 14,
      "north": 84.375,
      "south": -84.375,
      "east": 180,
      "west": -180
    }, ...
  ]
}

回應主體包含下列欄位。

copyright
包含顯示道路圖和衛星圖塊時，必須在地圖上顯示的歸因字串。詳情請參閱 Map Tiles API 政策。
maxZoomRect
包含與目前可視區域重疊的定界矩形陣列。此外也包含每個矩形內可用的最大縮放等級。

圖塊座標函式

大部分程式設計語言支援工具 (簡單函式)，方便使用者從經緯度組合轉換為特定縮放等級的圖塊座標。可以參考以下 JavaScript 程式碼範例，先將 latLng 轉換為點，再從點轉換為圖塊座標。

var TILE_SIZE = 256;

function fromLatLngToPoint(latLng) {
  var mercator = -Math.log(Math.tan((0.25 + latLng.lat() / 360) * Math.PI));
  return {
    x: TILE_SIZE * (latLng.lng() / 360 + 0.5),
    y: TILE_SIZE / 2 * (1 +  mercator / Math.PI)
  };
}

function fromLatLngToTileCoord(latLng, zoom) {
  var point = fromLatLngToPoint(latLng);
  var scale = Math.pow(2, zoom);

  return {
    x: Math.floor(point.x * scale / TILE_SIZE),
    y: Math.floor(point.y * scale / TILE_SIZE),
    z: zoom
  };
}