路况图层、公交图层和骑行图层

路况图层、公交图层和骑行图层会修改基本地图图层，以显示当前路况、本地公交网络或骑行路线信息。这些图层只在选定区域提供。

路况图层

借助 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 公交合作计划网站，了解详情。

以下示例显示的是在英国伦敦地图上启用的公交图层：

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
查看示例

试用示例

深绿色路线表示专用骑行路线。浅绿色路线表示设有专用“自行车道”的街道。虚线路线表示出于其他原因建议用于骑行的街道或道路。