Places UI Kit: Geliştiricilere özelleştirme ve kontrol imkanı sunan, kullanıma hazır bir kitaplıktır. Deneyin ve kullanıcı arayüzü kiti deneyiminizle ilgili görüşlerinizi paylaşın.

Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

Genel bakış

Maps JavaScript API'nin WebGL destekli özellikleri sayesinde eğimi ve dönüşü kontrol edebilir, doğrudan haritaya 3D nesneler ekleyebilir ve daha fazlasını yapabilirsiniz. Aşağıdaki özellikler dahildir:

WebGL yer paylaşımlı görünüm, haritalarınıza özel 2D ve 3D grafikler ile animasyonlu içerikler eklemenize olanak tanır.
Eğme ve başlık artık programatik olarak ve fare ile klavye hareketleri kullanılarak ayarlanabilir.
map.moveCamera() aynı anda birden fazla kamera özelliğini değiştirmenize olanak tanır.
Yakınlaştırma artık kesirli değerleri destekliyor.

Başlayın

Yeni WebGL özelliklerini kullanmak için vektör harita kullanmanız gerekir. Bu bölümde, bunu nasıl yapacağınızı öğreneceksiniz.

`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):

RenderingType kitaplığını yükleyin. Bu işlem, Haritalar kitaplığı yüklenirken yapılabilir:

const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

Haritayı başlatırken RenderingType.VECTOR veya RenderingType.RASTER değerini 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, harita kimliği yapılandırılarak yapılan tüm oluşturma türü ayarlarını geçersiz kılar.

Eğme ve döndürmeyi etkinleştirmek için tiltInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setTiltInteractionEnabled yöntemini çağırın.
Kaydırmayı etkinleştirmek için headingInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setHeadingInteractionEnabled yöntemini çağırı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 Stilleri'ni kullanma - Harita kimliği alma bölümündeki 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ğme ve döndürmeyi etkinleştirmek için Eğme veya Döndürme'yi işaretleyin. Bu sayede, bu değerleri programatik olarak ayarlayabilir ve kullanıcıların eğimi ve yönü doğrudan harita üzerinde ayarlamasına olanak tanıyabilirsiniz. Eğimin veya yönün kullanılması uygulamanızı olumsuz etkileyecekse kullanıcıların eğimi ve dönüşü ayarlayamaması için Eğim ve Dönüş'ü işaretlenmemiş olarak 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 Harita Yönetimi sayfasında bulabilirsiniz. Haritayı şu şekilde mapId özelliğini kullanarak oluşturduğunuzda 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 eklemenizi sağlayan <gmp-map> öğesi kullanılırken vektör haritalar, eğme ve başlık varsayılan olarak etkindir. Daha fazla bilgi edinin.

Örnekler

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