總覽

選取平台： Android iOS JavaScript

Maps JavaScript 的 3D 地圖可協助您打造沉浸式 3D 地圖體驗。這項 API 提供自訂地圖樣式、改善無障礙功能和提升可用性的工具，可協助您開發出引人入勝的互動式應用程式。

下例說明如何運用 Maps JavaScript API 的 3D 地圖：

為何要在 Maps JavaScript 中使用 3D 地圖

Maps JavaScript 的 3D 地圖在 maps3d 程式庫中提供 Map3DElement (<gmp-map-3d>) 類別，方便您在應用程式中使用 Google 的 3D 圖像。3D 地圖提供內建 3D 算繪服務，可讓您整合或試用 3D 真實世界環境、城市景觀和地標導覽。

使用 3D <gmp-map-3d> (maps3d 程式庫中的 Map3DElement) 呈現 3D 地形、相機傾斜、航向和範圍鳥瞰、凸出的 3D 建築物，以及 Marker3DElement (<gmp-marker-3d>) 等 3D 物件。如要呈現平面 2D 路線圖、標準 2D AdvancedMarkerElement 圖釘和 2D 向量樣式，請使用 2D <gmp-map> (maps 程式庫中的 MapElement 或 google.maps.Map)。

Maps JavaScript 的 3D 地圖有哪些功能？

• 打造真實世界地圖體驗：在 SATELLITE 或 HYBRID 模式 (在衛星圖像上疊加底圖標籤) 中，算繪城市、地形和地標的擬真 3D 空拍圖像，或使用 mode 屬性在 ROADMAP 模式中顯示樣式化 3D 底圖。詳情請參閱「變更地圖模式」。
• 自訂地圖樣式：
  • 3D 雲端式地圖樣式設定：控制底圖搜尋點和道路的顯示設定和樣式。詳情請參閱「自訂 3D 地圖」。
  • 自訂標記、彈出式視窗、折線和多邊形：使用 MarkerElement、Marker3DElement、Marker3DInteractiveElement、PopoverElement、Polyline3DElement 和 Polygon3DElement，在地圖上標示位置並繪製 3D 路線或邊界。詳情請參閱「標記」、「彈出式視窗」和「形狀和線條」。
  • 3D 模型和 glTF 資產：使用 Model3DElement，在真實世界座標中新增建築物、地標或物件的自訂 PBR glTF 3D 模型。詳情請參閱「模型」。
• 打造沉浸式地圖：
  • 預設攝影機路徑：使用 flyCameraTo 和 flyCameraAround，透過預先定義的攝影機鳥瞰和軌道動畫，引導使用者瀏覽 3D 地圖。詳情請參閱「為攝影機路徑加上動畫效果」。
  • 控制使用者互動：自訂使用者可用的控制項和相機動作。詳情請參閱「3D 地圖控制項和探索」、「限制攝影機檢視畫面和邊界」和「控制攝影機位置」。

快速範例

如要載入 maps3d 程式庫，並使用 mode="HYBRID"、center (lat,lng,altitude)、range、tilt 和 heading 轉譯 <gmp-map-3d> 元素，請使用下列程式碼片段：

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

將 YOUR_API_KEY 替換為您的 Google 地圖平台 API 金鑰。

如何在 Maps JavaScript 中使用 3D 地圖

1	做好準備	請先參閱「設定 JavaScript API」，然後按照後續的設定操作說明完成設定。
2	瞭解 Maps JavaScript API 的計費方式	詳情請參閱「用量與計費」一文。
3	建立地圖	詳情請參閱「開始使用」。

涵蓋範圍

在支援的國家/地區，特定都會區提供擬真 3D 建築物和地標網格。在沒有 3D 網格涵蓋範圍的區域 (例如印度)，<gmp-map-3d> 會算繪 2D 衛星或路線圖圖像，並覆蓋在 3D 地形高度上，但不會顯示 3D 建築物。如要在未涵蓋 3D 網格的區域展示地標，可以使用 Model3DElement 在其座標處放置自訂 glTF 3D 模型，或使用 2D <gmp-map>。如要瞭解各國家/地區的供應情形 (請查看「Maps JavaScript 3D」欄)，請參閱「Google 地圖平台涵蓋範圍詳細資料」。

後續步驟

• 查看入門指南，瞭解如何建立「Hello, World!」3D 地圖。
• 試試入門程式碼實驗室，瞭解如何在地圖中加入功能。
• 在下一個程式碼實驗室中，進一步瞭解標記和動畫。
• 瀏覽 Google 的一系列範例，根據您的用途找出合適的範例。