路況、大眾運輸和單車圖層

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

「流量」、「大眾運輸」和「單車」圖層會修改基本地圖圖層,以顯示目前的路況、本地大眾運輸路線或單車路線資訊。這些圖層僅適用於特定區域

路況圖層

Maps JavaScript API 可讓您使用 TrafficLayer 物件,在地圖中加入即時路況資訊 (如有支援)。車流量資訊經常更新,但不會立即更新。針對同一區域進行快速連續要求不太可能產生不同的結果。

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 34.04924594193164, lng: -118.24104309082031 },
    }
  );

  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 34.04924594193164, lng: -118.24104309082031 },
  });
  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

大眾運輸圖層

Maps JavaScript API 可讓您使用 TransitLayer 物件,在地圖上顯示城市的大眾運輸網路。啟用大眾運輸圖層後,如果地圖以某個支援大眾運輸資訊的城市為中心,地圖就會顯示主要大眾運輸路線的粗細線條。系統會根據大眾運輸路線業者提供的資訊設定路線的顏色。啟用大眾運輸圖層會改變基本地圖的樣式,以更強調大眾運輸路線。

系統目前只提供特定位置的大眾運輸資訊。如要查看目前大眾運輸工具的城市清單,請參閱這份清單

如果您是大眾運輸機構,負責監督所在城市的大眾運輸服務,並希望納入自己的資料,請前往 Google 大眾運輸合作夥伴計畫網站瞭解詳情。

下方範例顯示英國倫敦地圖上啟用的大眾運輸圖層:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 51.501904, lng: -0.115871 },
    }
  );

  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 51.501904, lng: -0.115871 },
  });
  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

單車圖層

Maps JavaScript API 可讓您使用 BicyclingLayer 物件,在地圖中加入單車資訊。BicyclingLayer 會在指定地圖的頂端顯示單車路徑圖層、建議單車路徑,以及單車路線其他適用的其他疊加層。此外,圖層也會自行變更基本地圖的樣式,以強調支援單車路線的街道,並減少不適合不適合單車通行的街道。

以下範例顯示在麻薩諸塞州劍橋地圖上的單車圖層:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 42.3726399, lng: -71.1096528 },
    }
  );

  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 42.3726399, lng: -71.1096528 },
  });
  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

window.initMap = initMap;
查看範例

查看範例

深綠色路線表示專門的單車路線。淺綠色路線代表有專用「單車道」的街道。虛線代表自行車專用街道或路徑。