車流量、大眾運輸和單車圖層

「車流量」、「大眾運輸」和「單車」圖層會修改基本地圖圖層，以顯示目前的路況、本地大眾運輸網路或單車路線資訊。這些圖層只在特定區域提供。

車流量圖層

您可以透過 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;
index.ts

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;
index.js
查看範例

測試範例程式碼

大眾運輸圖層

您可以透過 Maps JavaScript API 使用 TransitLayer 物件，在地圖上顯示城市的大眾運輸網路。如果啟用大眾運輸圖層，且地圖的中心位於支援顯示大眾運輸資訊的城市，地圖上的主要大眾運輸路線就會以彩色的粗線顯示。系統會根據大眾運輸路線業者提供的資訊，設定路線顏色。啟用大眾運輸圖層會修改基本地圖的樣式，以便突顯大眾運輸路線。

如果您是負責監督所在城市大眾運輸系統的公家機關，且希望地圖能納入您的資料，請前往 Google Transit 夥伴計畫網站瞭解詳情。

下例是英國倫敦地圖上啟用的大眾運輸圖層：

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;
index.ts

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;
index.js
查看範例

測試範例程式碼

單車圖層

您可以透過 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;
index.ts

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;
index.js
查看範例

測試範例程式碼

深綠色路線代表單車專用路線，淺綠色路線代表設有專用「單車道」的街道，虛線代表適合騎乘單車的其他建議街道或路徑。