向量地圖

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

Maps JavaScript API 提供兩種地圖實作方式:光柵與向量。根據預設,會載入光柵地圖,並將地圖以像素形式的光 ster 圖像圖塊載入,該圖由 Google 地圖平台伺服器端產生,然後提供給您的網頁應用程式。向量地圖是由向量式圖塊所組成。WebGL 是網路技術,在用戶端載入時會使用 WebView 顯示使用者 3 和裝置的 D 圖像。

向量地圖是使用者熟悉的 Google 地圖,與預設光柵圖塊地圖有許多優點,最值得注意的是,向量向量圖片的清晰度,以及以近近縮放等級加入的 3D 建築物。向量地圖也支援一些新功能,例如透過 WebGL 疊加層檢視新增 3D 內容的功能、程式輔助傾斜和標題控制項、強化的相機控制項,以及更流暢的變焦縮放功能。

開始使用向量地圖

控制相機

使用 map.moveCamera() 函式即可一次更新任何相機屬性的組合。map.moveCamera() 接受單一參數,其中包含要更新的所有相機屬性。以下範例說明如何呼叫 map.moveCamera() 一次設定 centerzoomheadingtilt

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 設為 truefalse,這個方法就非常實用。以下範例程式碼會檢查是否已啟用分數縮放功能:

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