教學課程 - 醒目顯示路網
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本教學課程將逐步說明如何建立並使用地圖樣式來醒目顯示路網:
建立並發布地圖樣式,以供使用。
建立並連結地圖 ID,以便在應用程式和網站中使用樣式。
在應用程式和網站中加入地圖 ID,以便應用程式使用地圖樣式。
步驟 1:建立並發布地圖樣式
啟用預先發布版樣式。
前往 Google 地圖平台,然後選取「Map Styles」(地圖樣式),並視需要選取或建立專案。
選取「Create style」(建立樣式)。
選取頂端的「Opt In」(加入),即可改用預先發布版的新雲端樣式。
設定路網的樣式
選取頁面底部的「Open in Style Editor」(在樣式編輯器中開啟)。
在「Feature type」(地圖項目類型) 下方,依序選取「Infrastructure」(基礎設施) 和「Road network」(路網)。
在右方彈出的面板中,找出「Polyline」(折線) 下方的「Fill color」(填滿顏色),然後選取顏色方塊。
選擇亮色。如果變更顏色,系統就會自動勾選「Fill color」(填滿顏色) 方塊。
在「Stroke weight」(邊框粗細) 下方拖曳滑桿,將邊框粗細設為 5。
在地圖上進行縮放,查看變更後的效果。所選地圖項目的階層較高,因此該階層底下的所有道路類型都會沿用您所做的變更。
儲存並發布地圖樣式
選取右上方的「Save」(儲存)。
在「Save and publish map style」(儲存並發布地圖樣式) 中,輸入地圖樣式名稱並視需要填入說明。
選取「Save」(儲存),這樣就能儲存並發布地圖樣式。
步驟 2:建立並連結地圖 ID
您可以透過地圖 ID,在應用程式和網站中使用地圖樣式。對樣式所做的變更會在發布時生效,因此不必更新軟體或應用程式。
建立地圖 ID
回到 Google 地圖平台,這次請選取「Map Management」(地圖管理)。
選取頂端的「Create Map ID」(建立地圖 ID)。
加入地圖 ID 名稱並視需要填入說明。
根據您要使用地圖樣式的位置,選取地圖 ID 的地圖類型。
選取頁面底部的「Save」(儲存),這樣就能建立地圖 ID。
將地圖 ID 連結至地圖樣式
在「Associated map style」(相關聯的地圖樣式) 下方,選取您在上方建立的地圖樣式。
選取「Save」(儲存),這樣地圖 ID 就能與地圖樣式建立關聯。
步驟 3:在應用程式或網站中加入地圖 ID
地圖 ID 與發布的地圖樣式建立關聯後,就可以加到應用程式或網站來進行測試,看看能否正常運作。
如要進一步瞭解如何加入地圖 ID,請參閱「在地圖中加入地圖 ID」一文。
後續步驟
以下是您後續可採取的動作:
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2023-12-07 (世界標準時間)。
[{
"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\uff1a2023-12-07 (\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"]],["上次更新時間:2023-12-07 (世界標準時間)。"]]