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

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

路况图层

借助 Maps JavaScript API，您可以使用 TrafficLayer 对象向地图添加实时路况信息（如果支持）。路况信息会经常刷新，但不会即时刷新。如果针对同一区域快速连续发出多个请求，则可能会返回一些相似的结果。

TypeScript

async function init(): Promise<void> {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();

JavaScript

async function init() {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();
查看示例

公交图层

借助 Maps JavaScript API，您可以使用 TransitLayer 对象在地图上显示城市的公交网络。启用公交图层后，如果地图的中心位置是一个支持公交信息的城市，地图将以彩色粗线显示主要公交线路。线的颜色根据公交线路运营商提供的信息设置。启用公交图层将改变基本地图的样式，以重点突出公交路线。

如果您是一家负责监管所在城市公共交通的公共机构，并且想要将您的数据添加到地图中，请访问 Google 公交合作计划网站，了解详情。

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

TypeScript

async function init(): Promise<void> {
    const { TransitLayer } = await google.maps.importLibrary('maps');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const transitLayer = new TransitLayer();

    transitLayer.setMap(innerMap);
}

void init();

JavaScript

async function init() {
    const { TransitLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const transitLayer = new TransitLayer();

    transitLayer.setMap(innerMap);
}

void init();
查看示例

骑行图层

借助 Maps JavaScript API，您可以使用 BicyclingLayer 对象向地图添加骑行信息。BicyclingLayer 会在给定地图上渲染自行车道图层、建议骑行路线以及其他的骑行专用叠加层。此外，该图层还会改变基本地图本身的样式，以突出支持骑行路线的街道，并淡化不适合骑行的街道。

以下示例显示的是在马萨诸塞州坎布里奇地图上启用的骑行图层：

TypeScript

async function init(): Promise<void> {
    const { BicyclingLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const bikeLayer = new BicyclingLayer();

    bikeLayer.setMap(innerMap);
}

void init();

JavaScript

async function init() {
    const { BicyclingLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const bikeLayer = new BicyclingLayer();

    bikeLayer.setMap(innerMap);
}

void init();
查看示例

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