Google 地圖平台即將推出新版地圖樣式。新版地圖樣式內建全新的預設調色盤,並且提升地圖體驗、改善服務的可用性。所有地圖樣式都將於 2025 年 3 月自動更新。請參閱「
Google 地圖平台新版地圖樣式 」一文,進一步瞭解適用範圍及如何提早啟用。
提供意見
開始使用
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
請按照下列步驟,設定進階標記。
取得 API 金鑰並啟用 Maps JavaScript API
您需有已連結帳單帳戶的 Cloud 專案,並啟用 Maps JavaScript API,才能使用進階標記。詳情請參閱「設定 Google Cloud 專案 」一文。
取得 API 金鑰
建立地圖 ID
如要建立新的地圖 ID ,請參考關於雲端自訂功能 的說明。請將地圖類型設為「JavaScript」 ,然後選取「Vector」(向量) 或「Raster」(光柵) 選項。
重要事項: 進行測試時,您可以略過建立及設定步驟的步驟
在應用程式程式碼中使用 mapId: 'DEMO_MAP_ID'
。
更新地圖初始化程式碼
執行這項操作時,需用到您剛才建立的地圖 ID,到「地圖管理 」頁面即可找到 ID。
載入 Maps JavaScript API 。
視需要從 async
函式內載入進階標記庫:
const { AdvancedMarkerElement } = await google . maps . importLibrary ( "marker" ) as google . maps . MarkerLibrary ;
使用 mapId
屬性執行地圖例項化時,請提供地圖 ID:這可以是您提供的地圖 ID,也可以是 DEMO_MAP_ID
。
const map = new
google . maps . Map ( document . getElementById ( 'map' ), {
center : { lat : - 34.397 , lng : 150.644 },
zoom : 8 ,
mapId : 'YOUR_MAP_ID'
});
注意: 進階標記地圖範例使用的地圖 ID,會連結到搜尋點較少的地圖樣式。如果您是重複使用程式碼範例,建議將這些地圖 ID 換成 DEMO_MAP_ID
或自己的地圖 ID。
檢查地圖功能 (選用)
進階標記需要地圖 ID,如未提供,進階標記便無法載入。如要解決這個問題,您可以加入 mapcapabilities_changed
事件監聽器來訂閱地圖功能變更。您不一定要使用「地圖功能」,我們建議只在進行測試、疑難排解或執行階段回退時使用即可。
// Optional: subscribe to map capability changes.
map . addListener ( 'mapcapabilities_changed' , () => {
const mapCapabilities = map . getMapCapabilities ();
if ( ! mapCapabilities . isAdvancedMarkersAvailable ) {
// Advanced markers are *not* available, add a fallback.
}
});
後續步驟
建立預設進階標記
提供意見
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權 ,程式碼範例則為阿帕契 2.0 授權 。詳情請參閱《Google Developers 網站政策 》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-09-20 (世界標準時間)。
[{
"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-09-20 (\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-09-20 (世界標準時間)。"]]