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

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

車流量圖層

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

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

試用範例

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