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

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

路况图层

借助 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

查看示例

试用示例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

公交图层

借助 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

查看示例

试用示例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

骑行图层

借助 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

查看示例

试用示例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell