自訂 3D 地圖

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

您可以使用雲端式地圖樣式設定，控制向使用者顯示的地圖外觀和風格。您可以控制搜尋點密度、移除特定搜尋點類別，以及修改地圖項目的填色或筆劃，為使用者打造專屬的地圖體驗。

雲端式地圖樣式設定提供免程式碼編輯體驗，您建立的每個自訂樣式都會與地圖 ID 建立關聯；在地圖控制台中對樣式所做的編輯，會自動顯示在應用程式中。

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

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

總覽

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

1 建立地圖 ID 建立地圖 ID。 地圖 ID 會傳遞至應用程式，用於處理樣式。在後續步驟中，您會將自訂樣式與這個地圖 ID 建立關聯。
2 建立雲端式地圖樣式 在這個步驟中，選取「3D Roadmap」(支援淺色和深色模式) 或「3D Hybrid」(支援淺色模式)。
3 將地圖樣式與地圖建立關聯 將樣式連結至您在步驟 1 建立的地圖 ID
4 在應用程式中加入地圖 ID 使用 map-id 參數在程式碼中指定地圖 ID。
5 發布地圖 ID 請注意，自訂樣式變更發布後，會自動套用至應用程式。

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

動態更新地圖 ID

地圖例項化後，您可以動態更新 mapId 屬性。這樣一來，您就可以套用不同的雲端式地圖樣式，不必重新建立整個 Map3DElement 執行個體。

如要更新地圖 ID，請在 Map3DElement 執行個體上設定 mapId 屬性：

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

由於 mapId 屬性會反映回 HTML 屬性，您也可以透過修改屬性來動態更新：

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

限制

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

  • 深色模式僅適用於 ROADMAP 模式 (HYBRID 和 SATELLITE 模式不支援深色模式)。
  • 不支援資料導向樣式等需要地圖 ID 的功能。