向量地圖

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

使用者熟悉的 Google 地圖就是向量地圖，與預設的光柵圖塊地圖相比，向量地圖具備許多優點。最明顯的是向量圖片的銳利度，以及在高縮放等級中增加的 3D 建築物功能。向量地圖也支援一些新功能，例如可利用 WebGL 疊加層檢視新增 3D 內容、提供傾斜和方向程式輔助控制項、加入強化後的攝影機控制項，並導入小數縮放功能，使縮放更流暢。

開始使用向量地圖

控制攝影機

使用 map.moveCamera() 函式即可一次更新攝影機屬性的任何組合。map.moveCamera() 接受單一參數，其中包含要更新的所有攝影機屬性。以下範例顯示如何呼叫 map.moveCamera()，一次設定 center、zoom、heading 和 tilt：

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

您可以呼叫 map.moveCamera() 來為攝影機屬性加入動畫效果，並設定動畫迴圈，如下所示：

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

小數縮放

向量地圖支援小數縮放功能，意即縮放時不必使用整數，運用小數值就可以。雖然光柵地圖和向量地圖都支援小數縮放功能，但向量地圖預設啟用，而光柵地圖卻預設停用。您可以利用 isFractionalZoomEnabled 地圖選項，決定要啟用或停用小數縮放功能。

以下範例顯示在初始化地圖時啟用小數縮放功能：

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

您也可以透過設定 isFractionalZoomEnabled 地圖選項來啟用或停用小數縮放功能，如下所示：

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

您可以設定事件監聽器，偵測小數縮放功能是否啟用。如果當初未明確將 isFractionalZoomEnabled 設為 true 或 false，建議用這個方法幫助您分辨。以下程式碼範例會檢查小數縮放功能是否啟用：

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});