自訂 3D 地圖

您可以使用雲端式地圖樣式設定，自訂 3D 基礎地圖的外觀和風格。

您可以利用雲端式地圖樣式設定功能，控管向使用者顯示的地圖外觀與風格。您可以控制搜尋點密度、移除特定搜尋點類別，以及修改地圖項目的填滿或筆觸，打造符合使用者需求的專屬地圖體驗。

雲端式地圖樣式設定提供免程式碼的編輯體驗，您可以在 Google Cloud 控制台中使用。在地圖控制台中編輯樣式後，應用程式會自動顯示變更。

以下範例顯示的地圖使用自訂樣式，將休閒娛樂功能圖示和文字的顏色變更為橘色：

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

總覽

使用雲端式地圖樣式設定自訂 3D 地圖的程序，與 2D 地圖相同：

1 建立地圖 ID 建立地圖 ID。 地圖 ID 會傳遞至應用程式，以處理樣式。您會在後續步驟中，將自訂樣式與這個地圖 ID 建立關聯。
2 建立雲端式地圖樣式 您必須選取「3D 混合」並使用「淺色模式」。
3 將地圖樣式與地圖建立關聯 將樣式連結至步驟一建立的地圖 ID
4 在應用程式中加入地圖 ID 使用 map-id 參數在程式碼中指定地圖 ID。
5 發布地圖 ID 請注意，發布後，自訂樣式的變更會自動併入應用程式。

如要深入瞭解如何建立地圖樣式，請參閱「建立及使用地圖樣式」一文。

限制

在 Maps JavaScript 中使用雲端式地圖樣式設定和 3D 地圖時，請注意下列限制：

  • 不支援深色模式。
  • 不支援啟用地圖 ID 的功能，例如資料導向樣式。