3D haritaları özelleştirme

Bulut tabanlı harita stillerini kullanarak 3D temel haritanın görünümünü ve tarzını özelleştirebilirsiniz.

Bulut tabanlı harita stilleri sayesinde, kullanıcılara sunduğunuz haritanın görünümü ve tarzı üzerinde kontrol sahibi olursunuz. Önemli yerlerin (ÖY) yoğunluğu, belirli ÖY kategorilerinin kaldırılması ve özelliklerin dolgu veya konturunun değiştirilmesi gibi özellikleri kontrol ederek kullanıcılarınıza özel bir harita deneyimi oluşturabilirsiniz.

Bulut tabanlı harita stilleri, Google Cloud Console'da kodsuz düzenleme deneyimi sunar. Oluşturduğunuz her özel stil bir harita kimliğiyle ilişkilendirilir. Haritalar konsolunda stilinizde yapılan düzenlemeler uygulamanızda otomatik olarak görünür.

Aşağıdaki örnekte, rekreasyon özelliği simgelerinin ve metninin rengini turuncuya değiştirmek için özel stil kullanılan bir harita gösterilmektedir:

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();

Genel Bakış

Bulut tabanlı harita stilleri kullanılarak 3D haritaların özelleştirilmesi işlemi 2D haritalarla aynıdır:

1 Harita kimliği oluşturma Harita kimliği oluşturun. Harita kimlikleri, stil oluşturmayı yönetmek için uygulamanıza iletilir. Sonraki adımlarda bu harita kimliğiyle özel bir stil ilişkilendireceksiniz.
2 Bulut tabanlı harita stili oluşturma Bu adımda "3D Hibrit"i seçip "açık modu" kullanmanız gerekir.
3 Harita stilinizi bir haritayla ilişkilendirme Stilinizi birinci adımda oluşturduğunuz harita kimliğine bağlayın.
4 Uygulamanıza harita kimliğini ekleme map-id parametresini kullanarak kodunuzda harita kimliğini belirtin.
5 Harita kimliğini yayınlama Özel stilinizde yapılan değişikliklerin, yayınlandıktan sonra uygulamanıza otomatik olarak dahil edildiğini unutmayın.

Harita stilleri oluşturma hakkında ayrıntılı bilgi için Harita stilleri oluşturma ve kullanma başlıklı makaleyi inceleyin.

Harita kimliğini dinamik olarak güncelleme

Harita oluşturulduktan sonra mapId özelliğini dinamik olarak güncelleyebilirsiniz. Bu sayede, Map3DElement örneğinin tamamını yeniden oluşturmanıza gerek kalmadan farklı bir bulut tabanlı harita stili uygulayabilirsiniz.

Harita kimliğini güncellemek için Map3DElement örneğinde mapId özelliğini ayarlayın:

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

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

mapId özelliği HTML özelliğini yansıttığı için, özelliği değiştirerek de dinamik olarak güncelleyebilirsiniz:

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

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

Sınırlamalar

Maps JavaScript'te 3D Haritalar ile bulut tabanlı harita stilini kullanırken dikkat etmeniz gereken belirli sınırlamalar vardır:

  • Koyu mod desteklenmez.
  • Veriye dayalı stil gibi harita kimliği etkin özellikler desteklenmez.