2D 資訊方塊總覽

藍圖範例地圖圖塊只是從世界細分為已建立索引的資料庫 格線。新版瀏覽器可讓你以快速且有效率的方式存取及使用地圖資料 提供多種製圖比例尺碼Map Tiles API 可讓您 多個主題地理資料集，包括 Google 收錄：

  • 使用 Google 製圖樣式

  • 使用衛星相機和空拍相機拍攝的正攝影相片 地球上由上至下 (天底) 的圖像。

  • Hillshade 等距地圖。

2D 地圖圖塊都具有地理參照，且互相對齊。已選取 以檢視區的地理範圍和縮放等級為依據縮放等級 範圍從 0 (觀看整個世界) 到 22 (觀看街道和 區塊)。

地圖主題

您可以查看下列地圖主題的地圖圖塊。

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

如要從 Map Tiles API 要求地圖圖塊，您必須先要求 工作階段符記。工作階段符記 會追蹤您地圖和可視區域目前的狀態。設定工作階段時 符記，您必須設定 mapType 值，使其符合您想要的地圖主題。 然後，您必須在每個向 Map 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) 和「東」可以是負數 (例如「-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
  };
}