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

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

路况图层

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

试用示例

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