圖層
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
「圖層」是地圖上的物件,包含一或多個不同項目,但可視為一個整體進行操作。圖層通常會反映您新增至地圖上方的物件集,以指定共同的關聯性。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);
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-06 (世界標準時間)。
[null,null,["上次更新時間: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```"]]