图层
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
图层是地图上的对象,包含一个或多个单独项,但可作为一个整体进行操作。图层通常反映了您添加到地图上方以指定共同关联的对象集合。Maps JavaScript API 会通过以下方法管理图层内对象的呈现方式:将图层的组成项呈现在一个对象(通常为图块叠加层)中并根据地图视口的变化情况进行显示。图层还可以改变地图自身的呈现图层,以契合图层的方式稍稍改变基本图块。请注意,从设计上讲,大部分图层可能无法通过各自的对象进行访问,而只能作为一个整体进行操作。
图层概览
Maps JavaScript API 有以下几种类型的图层:
- Google 地图数据层提供了一个可用于存储任意地理空间数据的容器。您可以使用数据层存储自定义数据,也可以在 Google 地图上显示 GeoJSON 数据。
- 热图图层利用热图直观呈现功能呈现地理数据。
- KML 图层可将 KML 和 GeoRSS 元素渲染成 Maps JavaScript API 图块叠加层。
- 路况图层在地图上显示路况信息。
- 公交图层在地图上显示您所在城市的公共交通网络。
- 骑车图层对象可将自行车道图层和/或自行车专属叠加层呈现在一个通用图层中。默认情况下,在请求 BICYCLING 出行方式路线时,该图层会在DirectionsRenderer 中返回。
添加图层
若要向地图添加图层,只需调用 setMap()
,向其传递要显示该图层的地图对象。同样,若要隐藏图层,请调用 setMap()
并传递 null
。
以下代码段将英国伦敦设为地图的中心,并添加公交图层。
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.5,-0.11)
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-06。
[null,null,["最后更新时间 (UTC):2025-08-06。"],[[["\u003cp\u003eLayers in Maps JavaScript API are objects consisting of multiple items that are treated as a single unit and often represent collections of objects on the map.\u003c/p\u003e\n"],["\u003cp\u003eThe API provides various layer types, including Data, Heatmap, KML, Traffic, Transit, and Bicycling layers, each serving a distinct purpose for displaying geospatial data.\u003c/p\u003e\n"],["\u003cp\u003eYou can easily add or hide a layer by calling the \u003ccode\u003esetMap()\u003c/code\u003e method, providing the map object or \u003ccode\u003enull\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThe example code demonstrates adding a Transit layer to a map centered on London.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/multilayer \"View this page for the Android platform docs.\") [JavaScript](/maps/documentation/javascript/layers \"View this page for the JavaScript platform docs.\")\n\nLayers are objects on the map that consist of one or more separate items,\nbut are manipulated as a single unit. Layers generally reflect collections of\nobjects that you add on top of the map to designate a common association. The\nMaps JavaScript API manages the presentation of objects within layers\nby rendering their constituent items into one object (typically a tile overlay) and\ndisplaying them as the map's viewport changes. Layers may also alter the presentation\nlayer of the map itself, slightly altering the base tiles in a fashion\nconsistent with the layer. Note that most layers, by design, may not be\naccessed via their individual objects, but may only be manipulated as a\nunit.\n\nLayers Overview\n\nThe Maps JavaScript API has several types of layers:\n\n- The [**Google Maps Data\n layer**](/maps/documentation/javascript/datalayer) provides a container for arbitrary geospatial data. You can use the Data layer to store your custom data, or to display GeoJSON data on a Google map.\n- The [**Heatmap layer**](/maps/documentation/javascript/heatmaplayer) renders geographic data using a *Heatmap* visualization.\n- The [**KML layer**](/maps/documentation/javascript/kmllayer) renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.\n- The [**Traffic layer**](/maps/documentation/javascript/trafficlayer#traffic_layer) displays traffic conditions on the map.\n- The [**Transit layer**](/maps/documentation/javascript/trafficlayer#transit_layer) displays the public transport network of your city on the map.\n- The [**Bicycling layer**](/maps/documentation/javascript/trafficlayer#bicycling_layer) object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the **DirectionsRenderer** when requesting directions of travel mode **BICYCLING**.\n\nAdd a layer\n\nTo add a layer to a map, you only need to call `setMap()`,\npassing it the map object on which to display the layer. Similarly, to hide a\nlayer, call `setMap()`, passing `null`.\n\nThe below snippet centers the map on London, UK, and adds the [Transit\nlayer](/maps/documentation/javascript/trafficlayer#transit_layer). \n\n```javascript\nvar mapOptions = {\n zoom: 13,\n center: new google.maps.LatLng(51.5,-0.11)\n}\n\nvar map = new google.maps.Map(document.getElementById(\"map\"), mapOptions);\n\nvar transitLayer = new google.maps.TransitLayer();\ntransitLayer.setMap(map);\n```"]]