算繪類型 (光柵和向量)

Maps JavaScript API 提供兩種地圖導入方式：光柵與向量。光柵地圖會將地圖載入為以像素為基礎的光柵圖片圖塊格線，這些圖塊是由 Google 地圖平台伺服器端產生，然後提供給您的網頁應用程式。向量地圖則是由以向量為基礎的圖塊組成，這些圖塊會在載入時使用 WebGL (一種網頁技術，可讓瀏覽器存取使用者裝置上的 GPU，以算繪 2D 和 3D 圖像) 在用戶端繪製。

建議使用向量地圖類型，以獲得最佳使用者體驗，因為這類地圖可提供更精確的視覺效果、更完善的地圖快取功能，以及控制地圖傾斜度和方向的功能。進一步瞭解向量地圖功能。

預設算繪類型

地圖的預設算繪類型會因實作方式而異。

使用 <gmp-map> 元素的地圖預設為向量算繪類型。
使用 <div> 元素的地圖會預設為點陣圖算繪類型。google.maps.Map

如要設定地圖的算繪類型，請指定 renderingType 地圖選項，或在相關聯的地圖 ID 上設定選項。renderingType選項會覆寫透過設定地圖 ID 進行的任何算繪類型設定。

指定 `renderingType` 選項

使用 renderingType 選項，為地圖指定光柵或向量的算繪類型 (不需地圖 ID)。如果是使用 div 元素和 JavaScript 載入的地圖，預設的算繪類型為 google.maps.RenderingType.RASTER。請按照下列步驟設定選項：renderingType

載入 RenderingType 程式庫；載入 Maps 程式庫時即可執行這項操作：
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```

初始化地圖時，請使用 renderingType 選項指定 RenderingType.VECTOR 或 RenderingType.RASTER：

map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

設定向量地圖的算繪類型後，您必須設定所需功能的選項。

如要啟用傾斜功能，請將 tiltInteractionEnabled 地圖選項設為 true，或呼叫 map.setTiltInteractionEnabled(true)。
如要啟用平移功能，請將 headingInteractionEnabled 地圖選項設為 true，或呼叫 map.setHeadingInteractionEnabled(true)。

使用 <gmp-map> 元素載入的地圖預設會以 google.maps.RenderingType.VECTOR 類型算繪，並啟用傾斜和方向控制項。如要使用 <gmp-map> 元素設定算繪類型，請使用 rendering-type 屬性。

使用地圖 ID 設定算繪類型

您也可以使用地圖 ID 指定算繪類型。按照「使用雲端式地圖樣式設定 - 取得地圖 ID」一文中的步驟操作，建立地圖 ID。請務必將「地圖類型」設為「JavaScript」，然後選取「向量」或「光柵」選項。勾選「傾斜」和「旋轉」，即可啟用地圖的傾斜和旋轉功能。這樣一來，您就能透過程式輔助方式調整這些值，而使用者也能直接在地圖上調整傾斜和方向設定。要是使用傾斜或方向會對應用程式造成負面影響，請勿勾選「傾斜」和「旋轉」，這樣就能避免使用者調整這兩項設定。

建立向量地圖 ID

接著，請使用您建立的地圖 ID 更新地圖初始化程式碼。您可以在「地圖管理」頁面中找到地圖 ID。將地圖執行個體化時，請使用 mapId 屬性提供地圖 ID，如下所示：

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

偵測目前使用的算繪類型

如要偵測使用的轉譯類型，請呼叫地圖物件的 getRenderingType()，如下例所示：

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```