Genel bakış

Maps JavaScript API için WebGL destekli özellikler sayesinde eğme ve döndürme işlemlerini kontrol edebilir, doğrudan haritaya 3D nesneler ekleyebilir ve daha pek çok işlem yapabilirsiniz. Aşağıdaki özellikler dahildir:

Başlayın

Yeni WebGL özelliklerini kullanmak için vektör harita kullanmanız gerekir. Bu bölümde bunun nasıl yapılacağı gösterilmektedir.

renderingType seçeneğini belirtin

Haritanız için raster veya vektör oluşturma türünü belirtmek üzere renderingType seçeneğini kullanın (harita kimliği gerekmez):

  1. RenderingType kitaplığını yükleyin. Bunu Haritalar kitaplığı yüklenirken yapabilirsiniz:

    const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    
  2. Haritayı başlatırken RenderingType.VECTOR veya RenderingType.RASTER'yi belirtmek için renderingType seçeneğini kullanın:

    map = new Map(
      document.getElementById('map') as HTMLElement,
      {
        zoom: 4,
        center: position,
        renderingType: RenderingType.VECTOR,
      }
    );
    

renderingType seçeneği, bir harita kimliği yapılandırarak yapılan tüm oluşturma türü ayarlarını geçersiz kılar.

  • Eğilme ve döndürme özelliğini etkinleştirmek için tiltInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setTiltInteractionEnabled işlevini çağırın.
  • Kaydırma özelliğini etkinleştirmek için headingInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setHeadingInteractionEnabled'yi arayın.

Oluşturma türünü ayarlamak için harita kimliği kullanma

Harita kimliği kullanarak da oluşturma türünü belirtebilirsiniz. Yeni bir harita kimliği oluşturmak için Bulut tabanlı harita stilini kullanma - Harita kimliği alma başlıklı makaledeki adımları uygulayın. Harita türünü JavaScript olarak ayarladığınızdan ve Vektör seçeneğini belirlediğinizden emin olun. Haritada eğilme ve dönme özelliğini etkinleştirmek için Eğilme ve/veya Dönme'yi işaretleyin. Bu sayede bu değerleri programatik olarak ayarlayabilir ve kullanıcıların eğikliği ve yönünü doğrudan haritada ayarlamalarına izin verebilirsiniz. Eğim veya yön kullanımı uygulamanızı olumsuz yönde etkileyecekse kullanıcıların eğimi ve yönü ayarlayamaması için Eğim ve Döndürme seçeneklerini işaretlemeden bırakın.

Vektör Harita Kimliği Oluşturma

Ardından, harita başlatma kodunuzu oluşturduğunuz harita kimliğiyle güncelleyin. Harita kimliklerinizi Haritalar Yönetimi sayfasında bulabilirsiniz. Haritayı burada gösterildiği gibi mapId mülkünü kullanarak örneklendirirken bir harita kimliği sağlayın:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

<gmp-map> öğesini kullanma

HTML kullanarak sayfanıza harita eklemenize olanak tanıyan <gmp-map> öğesi kullanıldığında vektör haritalar, eğim ve yön varsayılan olarak etkinleştirilir. Daha fazla bilgi edinin.

Örnekler

Bu özellikleri göstermek için örnekler verilmiştir: