Google 地圖平台即將推出新版地圖樣式。新版地圖樣式內建全新的預設調色盤,並且提升地圖體驗、改善服務的可用性。所有地圖樣式都將於 2025 年 3 月自動更新。請參閱「
Google 地圖平台新版地圖樣式 」一文,進一步瞭解適用範圍及如何提早啟用。
提供意見
開始使用
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
這項產品或功能仍在實驗階段 (正式發布前)。
我們對於正式發布前的產品和功能僅提供有限度的支援。此外,這類產品和功能的變更可能與其他正式發布前版本不相容。正式發布前產品/功能受到《Google 地圖平台服務專屬條款 》規範。詳情請參閱推出階段說明 。
在這個教學課程中,您將透過 Maps JavaScript 中的擬真成像 3D 地圖,逐步建立第一個 JavaScript 程式。這個簡單的視窗會顯示金門大橋的俯視圖,背景是 Marin Headlands。
完成教學課程後,您的開發環境中應該會顯示以下地圖:
設定環境
在開始編寫程式碼之前,您必須先設定執行 JavaScript 的環境。在本教學課程中,您將使用網路瀏覽器做為環境。所有新型網路瀏覽器均內建 JavaScript 支援,因此您無需安裝任何其他軟體。
開啟您選擇的文字編輯器。
建立新檔案,並使用 .html
副檔名儲存檔案,例如hello-p3djs.html
).
編寫 HTML 網頁
首先,請建立採用基本 HTML 結構的網頁:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
新增 JavaScript
接下來,請新增 JavaScript 程式碼來載入地圖。程式碼包含兩個元素:
gmp-map-3d
包含用於初始化啟動攝影機位置和檢視畫面的參數。
script
包含載入 Maps JavaScript API 的呼叫。請務必將 YOUR_KEY
替換成您的 API 金鑰。
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
執行程式
如要執行程式並查看輸出內容,請按照下列步驟操作:
儲存您建立的 HTML 檔案。
在網路瀏覽器中開啟檔案 (您可以在檔案上按兩下、拖曳至瀏覽器視窗,或是按一下滑鼠右鍵並使用「選擇開啟工具」)。
您應該會在瀏覽器視窗中看見地圖。
恭喜!您已經使用 Google Maps JavaScript API 擬真成像 3D 地圖撰寫程式。
後續步驟
使用 Google 現有的範例 ,建構更複雜的 3D 地圖體驗。
閱讀參考說明文件 ,瞭解 Maps JavaScript API 3D 地圖的完整潛力。
提供意見
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權 ,程式碼範例則為阿帕契 2.0 授權 。詳情請參閱《Google Developers 網站政策 》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-06-26 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
想進一步說明嗎?
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-06-26 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-06-26 (世界標準時間)。"]]