Google Maps API V3 之圖層

本文轉載自查看原文 2016-04-15 12:00 2785 Google/ Maps/ 地圖/ Web GIS/ api/ V3

Google官方教程：

Google 地圖 API V3 使用入門

Google 地圖 API V3 針對移動設備進行開發

Google 地圖 API V3 之事件

Google 地圖 API V3 之控件

Google 地圖 API V3 之疊加層

Google Maps API V3 之繪圖庫信息窗口

Google Maps API V3 之圖層

Google Maps API V3 之路線服務

圖層概述

圖層是地圖上的對象，包含一個或多個單獨項，但可作為一個整體進行操作。圖層通常反映了您添加到地圖上用於指定公共關聯的對象集合。Maps API 會通過以下方法管理圖層內對象的顯示形式：將圖層的組成項呈現在一個對象（通常為一個圖塊疊加層）中並根據地圖視口的變化情況進行顯示。圖層還可以改變地圖自身的展示圖層，以符合圖層樣式的方式稍稍改變基本圖塊。請注意，系統將大部分圖層設計為禁止通過其單個對象進行訪問，而僅可將其作為一個整體來操作。

要在地圖上添加圖層，只需調用 setMap() 並向其傳遞要在其中顯示圖層的地圖對象即可。類似地，要隱藏圖層，只需調用 setMap() 並傳遞 null 即可。

Maps API 包含以下幾種圖層：

KmlLayer 對象，用於在 Maps API V3 圖塊疊加層中呈現 KML 和 GeoRSS 元素。
HeatmapLayer 對象，使用熱圖可視化技術來呈現地理數據。
FusionTablesLayer 對象，用於呈現 Google Fusion Tables 中包含的數據。
TrafficLayer 對象，用於呈現描述路況情況的圖層和表示路況的疊加層。
TransitLayer 對象，用於在地圖上顯示您所在城市的公交網絡。
WeatherLayer 和 CloudLayer 對象，可讓您向地圖添加天氣預報和雲圖。
BicyclingLayer 對象，用於在公共圖層中呈現自行車道的圖層和/或自行車專用疊加層。默認情況下，在請求出行模式 BICYCLING 的路線時，系統會在DirectionsRenderer 中返回該圖層。
PanoramioLayer 對象，用於添加 Panoramio 中的照片作為圖層。
DemographicsLayer 對象，用於呈現美國的受眾特征信息作為圖層，僅供 Google Maps API for Business 客戶使用。該對象包含在 visualization 庫內。

下面將分別介紹這些圖層。

KML 和 GeoRSS 圖層

Google Maps API 支持采用 KML 和 GeoRSS 數據格式來顯示地理信息。這些數據格式使用 KmlLayer 對象顯示在地圖上，其構造函數采用可公開訪問的 KML 或 GeoRSS 文件的網址。

如需了解支持的元素、大小和復雜性限制，請訪問 KML 文檔中的 KML 支持網頁。

Maps API 會將提供的地理 XML 數據轉換為 KML 表現形式，該表現形式可使用第 3 版圖塊疊加層顯示在地圖上。該 KML 在外觀上與用戶熟悉的第 3 版疊加層元素類似（兩者在行為上也有幾分類似）。KML <Placemark> 和 GeoRSS point 元素會呈現為標記，例如，<LineString> 元素呈現為折線，而 <Polygon> 元素則呈現為多邊形。類似地，<GroundOverlay> 元素會在地圖上呈現為矩形圖片。不過，這些對象都不是 Google Maps API Marker、Polyline、Polygon 或 GroundOverlay，而只是地圖上呈現的單個對象，這一點非常重要。

設置 KmlLayer 對象的 map 屬性后，這些對象就會顯示在地圖上。（您可以調用 setMap() 傳遞 null，以從地圖刪除這些對象。）KmlLayer 對象會通過自動檢索地圖給定邊界的相應地圖項來管理這些子元素的呈現形式。隨着邊界的變化，當前視口中的地圖項會自動呈現。

由於 KmlLayer 中的組件為按需呈現，因此您可以借助圖層輕松地管理成千上萬個標記、折線和多邊形的呈現方式。請注意，盡管這些組成對象都提供了點擊事件，以返回這些單個對象的相關數據，但您無法直接訪問這些對象。

KML 圖層選項

KmlLayer() 構造函數可以傳遞以下多個 KmlLayerOptions：

map，用於指定要在其上呈現 KmlLayer 的 Map。您可以在 setMap() 方法中將此值設為 null，從而隱藏 KmlLayer。
preserveViewport，用於指定不應在顯示圖層時按 KmlLayer 內容的邊界調整地圖。默認情況下，在顯示 KmlLayer 時，系統會縮放並定位地圖以完整地顯示圖層內容。
suppressInfoWindows，用於指定 KmlLayer 中的可點擊地圖項不應觸發顯示 InfoWindow 對象。

此外，KmlLayer 呈現后，將包含不可改變的 metadata 屬性，該屬性在 KmlLayerMetadata 對象文字中包含圖層的名稱、說明、摘要和作者。您可以使用 getMetadata() 方法檢查此信息。由於呈現 KmlLayer 對象需要與外部服務器進行異步通信，因此您將需要監聽 metadata_changed 事件，該事件將用於表示屬性已填充。

以下示例根據給定的 GeoRSS Feed 構造了一個 KmlLayer：

var myLatLng = new google.maps.LatLng(49.496675, -102.65625);  
var mapOptions = {  
  zoom: 4,  
  center: myLatLng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
}  
  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss');  
georssLayer.setMap(map);

以下示例根據給定的 KML Feed 構造了一個 KmlLayer：

var myLatLng = new google.maps.LatLng(41.875696, -87.624207);  
var mapOptions = {  
  zoom: 11,  
  center: myLatLng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
}  
  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');  
ctaLayer.setMap(map);

KML 地圖項詳情

由於 KML 可包括大量地圖項，因此您可能無法直接訪問 KmlLayer 對象中的地圖項數據。相反，在顯示地圖項時，系統會將其呈現為與可點擊的 Maps API 疊加層類似。默認情況下，點擊單個地圖項即可顯示 InfoWindow，其中包含給定地圖項的 KML <title> 和 <description> 信息。此外，點擊 KML 地圖項會生成 KmlMouseEvent，該事件將傳遞以下信息：

position，用於表示要錨定的此 KML 地圖項的 InfoWindow 的緯度/經度坐標。對於多邊形、折線和 GroundOverlay，該位置通常為點擊位置，不過對於標記則為坐標原點。
pixelOffset，用於表示相對於上述 position 的偏移量，以錨定 InfoWindow 的“尾部”。對於多邊形對象，該偏移量通常為 0,0，不過對於標記則會包含標記的高度。
featureData，其中包含采用 JSON 結構的 KmlFeatureData。

KmlFeatureData 對象示例如下所示：

{  
  author: {  
    email: "nobody@google.com",  
    name: "Mr Nobody",  
    uri: "http://example.com"  
  },  
  description: "description",  
  id: "id",  
  infoWindowHtml: "html",  
  name: "name",  
  snippet: "snippet"  
}

以下示例顯示了點擊地圖項時一側 <div> 中的 KML 地圖項 <Description> 文本：

ar myLatLng = new google.maps.LatLng(40.65, -73.95);  
var mapOptions = {  
  zoom: 12,  
  center: myLatLng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
}  
  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var nyLayer = new google.maps.KmlLayer('http://www.searcharoo.net/SearchKml/newyork.kml',  
    {suppressInfoWindows: true});  
nyLayer.setMap(map);  
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {  
  var text = kmlEvent.featureData.description;  
  showInDiv(text);  
});  
  
function showInDiv(text) {  
  var sidediv = document.getElementById('contentWindow');  
  sidediv.innerHTML = text;  
}

熱圖圖層

此部分中的概念僅適用於 google.maps.visualization 庫中提供的地圖項。默認情況下，系統在加載 Maps JavaScript API 時不會加載該庫，您必須使用 libraries 引導程序參數進行明確指定。

熱圖圖層可在客戶端呈現熱圖。熱圖是一種可視化效果，用於描繪各地理點的數據強度。啟用熱圖圖層后，地圖上方就會顯示一個帶顏色的疊加層。默認情況下，強度較高的地區會顯示為紅色，而強度較低的地區會顯示為綠色。

Google Maps JavaScript API 既可以通過熱圖圖層在客戶端呈現熱圖數據，也可以通過 Fusion Table 在服務器端呈現熱圖數據。這兩種方法之間的一些關鍵區別包括：

熱圖圖層	Fusion Table 圖層
大量的數據點可能導致性能低下。	數據點增多不會對性能造成什么影響。
通過更改如下選項，能夠自定義熱圖的外觀：顏色漸變、數據點半徑以及各數據點的強度。	無法自定義熱圖的外觀。
能夠控制熱圖數據是否在較高的縮放級別下消失。	所有熱圖數據都會在您進行放大時消失。
數據可以通過 HTML 存儲、存儲在服務器上或者實時計算。數據可在運行時更改。	所有數據都必須存儲在 Fusion Table 中。在運行時無法輕易更改數據。

要添加熱圖，您必須首先新建一個 HeatmapLayer 對象，並以數組或 MVCArray[] 對象的形式為其提供一些地理數據。這些數據可以是 LatLng 對象，也可以是WeightedLocation 對象。將 HeatmapLayer 對象實例化后，通過調用 setMap() 方法將該對象添加到地圖中。

以下示例向舊金山的地圖添加了 14 個數據點。

/* Data points defined as an array of LatLng objects */  
var heatmapData = [  
  new google.maps.LatLng(37.782, -122.447),  
  new google.maps.LatLng(37.782, -122.445),  
  new google.maps.LatLng(37.782, -122.443),  
  new google.maps.LatLng(37.782, -122.441),  
  new google.maps.LatLng(37.782, -122.439),  
  new google.maps.LatLng(37.782, -122.437),  
  new google.maps.LatLng(37.782, -122.435),  
  new google.maps.LatLng(37.785, -122.447),  
  new google.maps.LatLng(37.785, -122.445),  
  new google.maps.LatLng(37.785, -122.443),  
  new google.maps.LatLng(37.785, -122.441),  
  new google.maps.LatLng(37.785, -122.439),  
  new google.maps.LatLng(37.785, -122.437),  
  new google.maps.LatLng(37.785, -122.435)  
];  
  
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: sanFrancisco,  
  zoom: 13,  
  mapTypeId: google.maps.MapTypeId.SATELLITE  
});  
  
var heatmap = new google.maps.visualization.HeatmapLayer({  
  data: heatmapData  
});  
heatmap.setMap(map);

添加加權數據點

熱圖既可以呈現 LatLng() 和 WeightedLocation 對象中的任一個，也可以呈現這兩者的組合。這兩個對象都代表地圖上的單個數據點，但是 WeightedLocation 對象可讓您額外指明該數據點的權重。對數據點加權后，WeightedLocation 會以高於簡單 LatLng 對象的強度進行呈現。權重是線性標度，其中每個 LatLng 對象的隱性權重均為 1；添加單個 {location: new google.maps.LatLng(37.782, -122.441), weight: 3} 的 WeightedLocation 與添加三次 google.maps.LatLng(37.782, -122.441) 的效果相同。您可以在單個數組中混合 weightedLocation 與 LatLng 對象。

在執行以下操作時，使用 WeightedLocation 對象代替 LatLng 會很有用：

在單個位置添加大量數據。以 1000 的權重呈現單個 WeightedLocation 要比呈現 1000 個 LatLng 對象快。
根據任意值對您的數據加以強調。例如，您在繪制地震數據時可以使用 LatLng 對象，但在測量各地震的里氏震級時應使用 WeightedLocation。

/* Data points defined as a mixture of WeightedLocation and LatLng objects */  
var heatMapData = [  
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},  
  new google.maps.LatLng(37.782, -122.445),  
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},  
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},  
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},  
  new google.maps.LatLng(37.782, -122.437),  
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},  
  
  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},  
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},  
  new google.maps.LatLng(37.785, -122.443),  
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},  
  new google.maps.LatLng(37.785, -122.439),  
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},  
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}  
];  
  
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: sanFrancisco,  
  zoom: 13,  
  mapTypeId: google.maps.MapTypeId.SATELLITE  
});  
  
var heatmap = new google.maps.visualization.HeatmapLayer({  
  data: heatMapData  
});  
heatmap.setMap(map);

自定義熱圖圖層

您可以通過以下熱圖選項自定義您的熱圖的呈現方式。有關詳情，請參閱 HeatmapLayerOptions 文檔。

dissipating：指定熱圖是否在縮放時消失。如果將 dissipating 設為 false，那么影響半徑會隨着縮放級別而增大，從而確保在任何給定的地理位置保留顏色強度。默認值為 false。
gradient：熱圖的顏色漸變，以 CSS 顏色字符串數組的形式指定。支持所有 CSS3 顏色（包括 RGBA），擴展命名的顏色除外。
maxIntensity：熱圖的最大強度。默認情況下，熱圖顏色根據地圖上任意像素處點的最大集中程度而動態調節。該屬性可讓您指定一個固定的最大值。如果您的數據集中包含一些強度偏高的異常值，設置最大強度會很有幫助。
radius：各個數據點的影響半徑，單位為像素。
opacity：熱圖的透明度，以 0 到 1 之間的數字表示。

Fusion Table 圖層（實驗性）

Google Maps API 可讓您使用 FusionTablesLayer 對象將 Google Fusion Tables 中包含的數據呈現為地圖上的圖層。Google Fusion Table 是一種數據庫表格，其中每行都包含特定地圖項的相關數據；對於地理數據，Google Fusion Table 中的每行還另外包含位置數據，以存儲地圖項的位置信息。該 FusionTablesLayer 提供了 Fusion Tables 的界面，並支持自動呈現此位置數據，以提供用於顯示地圖項其他數據的可點擊疊加層。

限制

您可以使用 Maps API 向地圖添加最多 5 個 Fusion Tables 圖層，其中一個圖層可使用最多 5 個樣式化規則進行樣式化。

此外：

查詢結果中僅會映射或包含表格中的前 100,000 行數據。
使用空間預測的查詢僅會返回這前 100,000 行中的數據。因此，如果您在較大的表格中應用了過濾器，且該過濾器與前 100,000 行后的數據相匹配，則不會顯示這些行。
在導入或插入數據時，請注意以下事項：
- 一個 API 調用中發送的數據總量上限為 1MB。
- Fusion Table 中的數據單元格最多可支持一百萬個字符；有時，您可能需要降低坐標的精確度或簡化多邊形或線段描述。
- 每個表格所支持的頂點數量上限為 5 百萬。
在查看地圖時，您可能會注意到：
- 顯示了多幾何圖形的 10 個最大區域組成部分。
- 進一步縮小后，具有超過 500 個地圖項的表格將顯示點（而非直線或折線）。

Fusion Table 設置

Fusion Tables 是數據表格，可提供內置的地理數據支持。有關 Fusion Tables 的完整文檔，請參閱 Fusion Tables 開發者指南。對於在 Google 地圖上的 API 中顯示數據的 Fusion Tables 圖層，相應表格必須符合以下標准：

該表格必須作為公開或不公開表格進行共享。
該表格必須有一列或多列顯示為 Location。在 Fusion Tables 網絡界面中，依次選擇修改 > 修改列 (Edit > Modify Columns)，然后選擇所需的列。

Location 列必須符合以下格式要求。

緯度/經度坐標可以輸入為用單列、英文逗號分隔的形式（緯度,經度），也可以分成兩列（一列為緯度，另一列為經度）。有關詳情，請參閱 Google Fusion Tables 幫助中心內的如何指定帶有位置信息的列？。
地址必須先經過地理編碼處理。在 Fusion Tables 網絡界面中，選擇文件 > 地理編碼。
支持 KML 幾何數據，如點、線和多邊形。

構建 FusionTables 圖層

FusionTablesLayer 構造函數可使用表格的加密 ID 通過公開 Fusion Table 創建圖層，在 Fusion Tables 用戶界面中選擇文件 > 關於即可找到該 ID。

要向地圖添加 Fusion Tables 圖層，請先創建圖層，然后傳遞帶有以下參數的 query 對象：

select 屬性，該屬性的值為包含位置信息的列的名稱。對於包含空格、保留字詞或者未以字母開頭的任何列名稱，您都必須為其加上雙引號。
from 屬性，該屬性的值為任一加密 ID。

然后，將圖層的 map 設為您的 Map 對象，就像其他任何的疊加層一樣。

舊版的 Google Maps JavaScript API 按數字 ID 引用 Fusion Table。盡管該方法仍可繼續使用，但應該優先選用加密 ID。

以下示例使用公開的 Fusion Table 顯示了 2009 年芝加哥發生凶殺的地點：

var chicago = new google.maps.LatLng(41.850033, -87.6500523);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: chicago,  
  zoom: 12,  
  mapTypeId: 'roadmap'  
});  
  
var layer = new google.maps.FusionTablesLayer({  
  query: {  
    select: 'Geocodable address',  
    from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'  
  },  
});  
layer.setMap(map);

Fusion Table 查詢

Fusion Tables 還可讓您應用強大的查詢功能，該功能可根據指定標准對結果進行限制。您可以使用以下 FusionTablesLayerOptions query 參數指定查詢：

query: {  
  select: locationColumn,  
  from: fusionTableID,  
  where: constraintClause  
}

其中 locationColumn 是現有的經過地理編碼的列（類型為 Location）。對於 select 或 where 字段中的包含空格、保留字詞或者未以字母開頭的任何列名稱，您都必須為其加上雙引號。以下示例顯示了芝加哥高速運輸管理局 (CTA) 的紅線地鐵的沿線站點中，工作日的乘坐人數超過 5000 人次的站點：

var chicago = new google.maps.LatLng(41.948766, -87.691497);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: chicago,  
  zoom: 12,  
  mapTypeId: 'roadmap'  
});  
  
var layer = new google.maps.FusionTablesLayer({  
  query: {  
    select: 'address',  
    from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',  
    where: 'ridership > 5000'  
  }  
});  
layer.setMap(map);

Fusion Table 樣式

Fusion Tables 圖層構造函數也接受 FusionTablesLayerOptions styles 參數，以便向線和多邊形應用顏色、筆觸粗細度和透明度。您也可以通過支持的圖標記或圖標名稱來指定標記圖標。

在每張地圖中，僅可將樣式應用於一個 Fusion Tables 圖層。您最多可向該圖層應用五種樣式。

styles 參數使用了以下語法：

styles: [{  
  where: 'column_name condition',  
  markerOptions: {  
    iconName: "supported_icon_name"  
  },  
  polygonOptions: {  
    fillColor: "#rrggbb",  
    strokeColor: "#rrggbb",  
    strokeWeight: "int"  
  },  
  polylineOptions: {  
    strokeColor: "#rrggbb",  
    strokeWeight: "int"  }  
}, {  
  where: ...  
  ...  
}]

樣式的應用優先級高於 Fusion Tables 網絡界面中所指定的任何樣式。向圖層構造函數提供的樣式隨后會按照相應的列出順序進行應用，其中任何與多條規則相匹配的地圖項都會采用最后一個匹配樣式。

要創建應用到所有地圖項的默認樣式，請創建一個不帶 where 子句的樣式：

styles: [{  
  markerOptions: {  
    iconName: "large_green"  
  }  
}]

以下示例顯示了：

默認樣式，其中將所有多邊形設為綠色，透明度級別設為 0.3。
將“鳥類”列超過 300 的所有多邊形設為藍色，並保留默認樣式設置的透明度級別。
將“人口”列超過 5 的所有多邊形的透明度級別設為 1.0，並保留其 fillColor 值。

var australia = new google.maps.LatLng(-25, 133);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: australia,  
  zoom: 4,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
});  
  
layer = new google.maps.FusionTablesLayer({  
  query: {  
    select: 'geometry',  
    from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'  
  },  
  styles: [{  
    polygonOptions: {  
      fillColor: "#00FF00",  
      fillOpacity: 0.3  
    }  
  }, {  
    where: "birds > 300",  
    polygonOptions: {  
      fillColor: "#0000FF"  
    }  
  }, {  
    where: "population > 5",  
    polygonOptions: {  
      fillOpacity: 1.0  
    }  
  }]  
});  
layer.setMap(map);

Fusion Table 熱圖

Fusion Tables 還對熱圖提供一定的支持，並會以一組不同的顏色來表示匹配位置的密度。當前熱圖使用了紅色（密集）到綠色（稀少）的漸變來表示關聯位置的相對份額。要啟用熱圖，請將圖層的 FusionTablesLayerOptions heatmap 參數設置為 enabled: true。

以下示例使用熱圖顯示了巴西海岸的指定海灘：

var brazil = new google.maps.LatLng(-18.771115, -42.758789);  
  
map = new google.maps.Map(document.getElementById('map_canvas'), {  
  center: brazil,  
  zoom: 5,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
});  
  
layer = new google.maps.FusionTablesLayer({  
  query: {  
    select: 'LATITUDE',  
    from: '0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ'  
  },  
  heatmap: {  
    enabled: true  
  }  
});  
layer.setMap(map);

路況圖層

在 Google Maps API 中，您可以使用 TrafficLayer 對象向地圖添加實時路況信息（如果支持的話）。路況信息會在提出請求時提供。要確定路況覆蓋范圍的支持情況，請查看此電子表格。

var myLatLng = new google.maps.LatLng(39.915972, 116.395686);//北京交通路況  
var mapOptions = {  
  zoom: 13,  
  center: myLatLng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
}  
  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var trafficLayer = new google.maps.TrafficLayer();  
trafficLayer.setMap(map);

公交圖層

Google Maps API 可讓您使用 TransitLayer 對象在地圖上顯示某個城市的公交網絡。啟用公交圖層並以支持公交信息的城市作為地圖的中心后，地圖會將主要公交線路顯示為帶顏色的粗線。線的顏色根據公交線路運營機構所提供的信息而設置。啟用公交圖層會更改基本地圖本身的樣式，以突出顯示公交路線。

公交信息只適用於選定位置。要查看當前提供公交信息的城市列表，請參閱該列表。

如果您供職於負責監督所在城市的公交情況的公共機構，並希望將所在城市的公交數據錄入 Google 地圖，請訪問 Google 公交合作伙伴計划網站以了解詳情。

以下示例在北京的地圖上顯示了支持的公交圖層：

function initializeTransitLayer() {  
                var myLatLng = new google.maps.LatLng(51.501904, -0.115871);  
                var mapOptions = {  
                    zoom: 13,  
                    center: myLatlng,  
                    mapTypeId: google.maps.MapTypeId.ROADMAP  
                }  
  
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);  
  
                var transitLayer = new google.maps.TransitLayer();  
                transitLayer.setMap(map);  
            }

騎行圖層

在 Google Maps API 中，您可以使用 BicyclingLayer 對象向地圖添加騎行信息。BicyclingLayer 用於在給定地圖的頂部呈現一個騎行路徑、推薦騎行路線以及騎行專用的其他疊加層的圖層。此外，該圖層會更改基本地圖本身的樣式，以突出顯示支持騎行路線的街道，並弱化顯示不適合騎行的街道。

以下示例在麻薩諸塞州劍橋的地圖上顯示了支持的騎行圖層：

var myLatLng = new google.maps.LatLng(42.3726399, -71.1096528);  
var mapOptions = {  
  zoom: 14,  
  center: myLatLng,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
}  
  
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
  
var bikeLayer = new google.maps.BicyclingLayer();  
bikeLayer.setMap(map);

深綠色路線表示專用的騎行路線。淺綠色路線表示有專用“自行車車道”的街道。虛線路線表示不建議騎行的街道或路徑。

天氣和雲況圖層（庫）

此部分中的概念僅適用於 google.maps.weather 庫中提供的地圖項。默認情況下，系統在加載 Maps JavaScript API 時不會加載該庫，您必須使用 libraries 引導程序參數進行明確指定。

您可以通過 google.maps.weather 庫的 WeatherLayer 類和 CloudLayer 類在地圖上顯示天氣數據和雲圖。啟用雲況圖層會在地圖中添加雲量圖像（在 0 到 6 的縮放級別下顯示）。啟用天氣圖層會在地圖上顯示來自 weather.com 的當前天氣狀況，其中包括表示晴天、多雲、雨天等天氣的圖標。點擊某個特定地區的天氣圖標會打開一個信息窗口，其中列出了當前濕度和風況等詳細數據，以及未來四天的天氣預報。您可以通過 WeatherMouseEvent 對象的 featureDetails 屬性訪問這些詳細數據。以下示例在您單擊圖標時進行檢測，然后顯示相關位置的當前溫度。

google.maps.event.addListener(weatherLayer, 'click', function(e) {  
  alert('The current temperature at ' + e.featureDetails.location + ' is '  
        + e.featureDetails.current.temperature + ' degrees.');  
});

利用 WeatherLayerOptions 對象，您可以停用信息窗口，配置天氣圖層上顯示的標簽顏色，並自定義顯示的溫度單位（攝氏度或華氏度）和風速單位（公里/小時、英里/小時或米/秒）。

如果啟用了天氣圖層且縮放級別設為 12 或以下，那么您的地圖上會停用管理標簽（如街道或地區的名稱）。如果縮放級別為 13，地圖會自動停用天氣圖層，並恢復顯示管理標簽。

以下示例啟用了雲況和天氣圖層，並將默認單位設為華氏度。

var mapOptions = {  
  zoom: 6,  
  center: new google.maps.LatLng(49.265984, -123.127491),  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
  
var map = new google.maps.Map(document.getElementById("map_canvas"),  
    mapOptions);  
  
var weatherLayer = new google.maps.weather.WeatherLayer({  
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT  
});  
weatherLayer.setMap(map);  
  
var cloudLayer = new google.maps.weather.CloudLayer();  
cloudLayer.setMap(map);

Panoramio 圖層（庫）

此部分中的概念僅適用於 google.maps.panoramio 庫中提供的地圖項。默認情況下，系統在加載 Maps JavaScript API 時不會加載該庫，您必須使用 libraries 引導程序參數進行明確指定。

使用 PanoramioLayer 對象

您可以使用 PanoramioLayer 對象將 Panoramio 中的照片添加為地圖的圖層。PanoramioLayer 會在地圖上將 Panoramio 中的照片圖標（已加注地理位置標簽）的圖層呈現為一系列不同大小的照片圖標。

要向您的地圖添加 PanoramioLayer，只需創建以下對象並設置其地圖屬性即可：

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();  
panoramioLayer.setMap(map);

默認情況下，點擊 Panoramio 圖層內的照片圖標會彈出一個信息窗口，其中顯示了較大的照片和更多信息。要刪除該默認行為，您只需將圖層的 suppressInfoWindows 屬性設為 true 即可。您也可以檢查與單張 Panoramio 照片相關聯的元數據，方法是處理 PanoramioLayer 上的 'click' 事件，並檢查 PanoramioMouseEvent 的 featureDetails 屬性。請注意，如果您要實現自己的點擊處理程序且不顯示默認的信息窗口，那么您對 Panoramio 照片的使用行為必須遵循 Panoramio API 服務條款，包括任何品牌塑造和版權歸屬要求。

以下示例顯示了華盛頓州西雅圖的 Panoramio 圖層。您每點擊一張照片，右側面板中就會增加一個指向的 Panoramio 照片頁的鏈接：

var fremont = new google.maps.LatLng(47.651743, -122.349243);  
var mapOptions = {  
  zoom: 16,  
  center: fremont,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
  
var map = new google.maps.Map(  
    document.getElementById("map_canvas"),  
    mapOptions);  
  
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();  
  
panoramioLayer.setMap(map);  
  
google.maps.event.addListener(panoramioLayer, 'click', function(event) {  
  var photoDiv = document.getElementById('photoPanel');  
  var attribution = document.createTextNode(event.featureDetails.title + ": " + event.featureDetails.author);  
  var br = document.createElement("br");  
  var link = document.createElement("a");  
  link.setAttribute("href", event.featureDetails.url);  
  link.appendChild(attribution);  
  photoDiv.appendChild(br);  
  photoDiv.appendChild(link);  
});

按標記或用戶 ID 限制照片

您可以將要顯示在 PanoramioLayer 上的照片組限制為與特定文本標記或特定用戶相匹配的照片。

要僅顯示與特定標記相匹配的照片，請對 PanoramioLayer 對象調用 setTag()。系統會將圖層更新為僅顯示地圖視口內與該標記相匹配的照片。要僅顯示與特定用戶相匹配的照片，請對 PanoramioLayer 對象調用 setUserId()。

以下示例顯示了未經標記過濾的紐約港口的地圖。在輸入字段中輸入文字，然后使用 setTag() 方法應用過濾器：

var panoramioLayer;  
function initialize() {  
  var nyHarbor = new google.maps.LatLng(40.693134, -74.031028);  
  var mapOptions = {  
    zoom: 15,  
    center: nyHarbor,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  
  var map = new google.maps.Map(  
      document.getElementById("map_canvas"),  
      mapOptions);  
  
  panoramioLayer = new google.maps.panoramio.PanoramioLayer();  
  
  panoramioLayer.setMap(map);  
}  
  
function getTaggedPhotos() {  
  var tagFilter = document.getElementById('tag').value;  
  panoramioLayer.setTag(tagFilter);  
}

使用 Panoramio Widget API

您還可以使用 Panoramio Widget API 在 PanoramioWidget 對象內顯示圖片。要使用 Panoramio API，您需要通過腳本標記單獨從 JavaScript API 中為該 API 加載 JavaScript 符號：

<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1">
</script>

Panoramio PhotoWidget 的默認大小為 400x 300 像素。如果您希望在信息窗口中顯示 PhotoWidget，則可以使用該默認大小，也可以在 PhotoWidget 的構造函數內明確設置大小。請注意，PhotoWidget 不會自動根據其容器（在此情況下為信息窗口）的大小來調整自身大小。您需要明確設置該小部件的寬度和高度。

以下示例借助 Panoramio Widget API 使用 Panoramio 圖片填充了信息窗口。請注意，您可以輕松地配置該小部件，以便顯示多張圖片。

// This example requires loading the Panoramio Widget API  
// via http://www.panoramio.com/wapi/wapi.js?v=1  
  
// The photoDiv defines the DIV within the info window for  
// displaying the Panoramio photo within its PhotoWidget.  
// We use the info window's maximum size of 640 px.  
var photoDiv =  document.createElement("div");  
photoDiv.style.width = '640px';  
photoDiv.style.height = '500px';  
  
// The PhotoWidget width and height are expressed as number values,  
// not string values so we need to turn them into floats.  
var photoWidgetOptions = {  
  'width': parseFloat(photoDiv.style.width),  
  'height': parseFloat(photoDiv.style.height)  
};  
  
// We construct a PhotoWidget here with a blank (null) request as we  
// don't yet have a photo to populate it.  
var photoWidget = new panoramio.PhotoWidget(photoDiv, null, photoWidgetOptions);  
  
var monoLake = new google.maps.LatLng(37.973432, -119.093170);  
var mapOptions = {  
  zoom: 11,  
  center: monoLake,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
  
var map = new google.maps.Map(  
    document.getElementById("map_canvas"),  
    mapOptions);  
  
var photoWindow = new google.maps.InfoWindow();  
var panoramioOptions = {  
  suppressInfoWindows: true  
}  
var panoramioLayer = new google.maps.panoramio.PanoramioLayer(panoramioOptions);  
  
panoramioLayer.setMap(map);  
  
google.maps.event.addListener(panoramioLayer, 'click', function(event) {  
  
  var photoRequestOptions = {  
    ids: [{'photoId': event.featureDetails.photoId,  
           'userId': event.featureDetails.userId}]  
  }  
  photoWidget.setRequest(photoRequestOptions);  
  photoWidget.setPosition(0);  
  
  photoWindow.setPosition(event.latLng);  
  photoWindow.open(map);  
  photoWindow.setContent(photoDiv);  
});

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Google Maps API V3 之路線服務 Google Maps API v3離線開發包 google maps js v3 api教程(1) -- 創建一個地圖 Google maps javascript api v3 疊加層（Overlays）介紹 Google 地圖 API V3 之控件 Google Map Api V3 系列之導航(包括清除線路) Google Maps API 簡易教程（一）國內使用Google Maps JavaScript API Google Maps API v2 android版本開發國內手機不支持google play Service相關問題解決--圖文教程使用openstackclient調用Keystone v3 API