開始使用

選取平台： Android iOS JavaScript

在本教學課程中，您將逐步瞭解如何使用 Maps JavaScript 中的 3D 地圖，建立第一個 JavaScript 應用程式：一個基本視窗，顯示金門大橋的俯視圖，背景為馬林岬。

完成本教學課程後，您應該會在開發環境中看到下列地圖：

設定環境

開始編寫程式碼前，請先設定執行 JavaScript 的環境。在本教學課程中，您將使用網頁瀏覽器做為環境。所有新式網路瀏覽器都內建 JavaScript 支援功能，因此無須安裝任何額外軟體。

  1. 開啟您選擇的文字編輯器。
  2. 建立新檔案並儲存，副檔名為 .html (例如 hello-p3djs.html)。

編寫 HTML 網頁

首先，請建立具有基本 HTML 結構的網頁：

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

新增 JavaScript

接著，您將新增自訂 HTML 元素來載入地圖。這個程式碼包含兩個元素：

  • gmp-map-3d 包含用於初始化起始攝影機位置和檢視畫面的參數。
  • script 包含載入 Maps JavaScript API 的呼叫。請務必將 YOUR_KEY 替換成您的 API 金鑰。

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

執行應用程式

如要執行應用程式並查看輸出內容，請按照下列步驟操作：

  1. 儲存您建立的 HTML 檔案。
  2. 在網路瀏覽器中開啟檔案 (你可以按兩下檔案、將檔案拖曳到瀏覽器視窗中，或按一下滑鼠右鍵並使用「開啟方式」)。
  3. 瀏覽器視窗中應會顯示地圖。

恭喜！您剛才使用 Google 的 Maps JavaScript API 3D 地圖撰寫應用程式。

後續步驟

  • 使用 Google 現有的範例，建構更複雜的 3D 地圖體驗。
  • 如要充分發揮 Maps JavaScript API 中 3D 地圖的潛力，請參閱參考文件。