一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

Traffic 层、Transit 层和 Bicycling 层

Traffic 层、Transit 层和 Bicycling 层会修改基础地图层,以显示当前交通状况或者本地公共交通和骑行路线信息。这些层只在选定地区提供。

  1. Traffic 层
  2. Transit 层
  3. Bicycling 层

Traffic 层

Google Maps JavaScript API 允许您利用 TrafficLayer 对象向您的地图添加实时交通信息(若支持)。提供的交通信息对应的是发送请求的时间。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

查看 Traffic 层示例

Transit 层

Google Maps JavaScript API 允许您利用 TransitLayer 对象在地图上显示城市的公共交通网络。启用 Transit 层时,地图以支持公共交通信息的城市为中心,以彩色粗线显示公共交通干线。线的颜色根据公共交通线路运营商提供的信息设置。启用 Transit 层将改变基础地图的样式,以重点突出公共交通路线。

公共交通信息只在选定位置提供。如需查看当前提供公共交通信息的城市列表,请查阅此列表

如果您是一家负责监管所在城市公共交通的公共机构,想要加入您的数据,请访问 Google 公共交通合作伙伴计划网站来了解详情。

下例显示的是在英国伦敦地图上启用的 Transit 层:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

查看 Transit 层示例

Bicycling 层

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

下例显示的是在马萨诸塞州坎布里奇地图上启用的 Bicycle 层:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

查看 Bicycling 层示例

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

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面