Oluşturma türü (raster ve vektör)

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: raster ve vektör. Raster harita, haritayı piksel tabanlı raster resim karolarından oluşan bir ızgara olarak yükler. Bu karolar, Google Haritalar Platformu sunucu tarafında oluşturulur ve ardından web uygulamanıza sunulur. Vektör harita ise vektör tabanlı karolardan oluşur. Bu karolar, yükleme sırasında istemci tarafında WebGL kullanılarak çizilir. WebGL, tarayıcının kullanıcının cihazındaki GPU'ya erişerek 2D ve 3D grafikleri oluşturmasına olanak tanıyan bir web teknolojisidir.

Vektör harita türü, daha iyi görsel doğruluk, haritalar arasında daha iyi önbelleğe alma ve harita üzerinde eğimi ve yönü kontrol etme olanağı sağladığından en iyi kullanıcı deneyimi için önerilir. Vektör harita özellikleri hakkında daha fazla bilgi edinin.

Varsayılan oluşturma türü

Haritanın varsayılan oluşturma türü, uygulamanıza bağlı olarak değişir.

  • <gmp-map> öğesini kullanan haritalar varsayılan olarak vektör oluşturma türünü kullanır.

  • google.maps.Map ile <div> öğesini kullanan haritalar varsayılan olarak raster oluşturma türüne ayarlanır.

Haritanın oluşturma türünü, renderingType harita seçeneğini belirterek veya ilişkili bir harita kimliğinde seçeneği ayarlayarak belirleyin. 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.

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). div öğesi ve JavaScript kullanılarak yüklenen haritalar için varsayılan oluşturma türü google.maps.RenderingType.RASTER şeklindedir. renderingType seçeneğini ayarlamak için aşağıdaki adımları uygulayın:

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

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

  2. 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'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Vektör harita oluşturma türü ayarlandığında, gerekli özelliklerin seçeneklerini ayarlamanız gerekir.

  • Eğimi etkinleştirmek için tiltInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setTiltInteractionEnabled(true) yöntemini çağırın.
  • Kaydırmayı etkinleştirmek için headingInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setHeadingInteractionEnabled(true) yöntemini çağırın.

<gmp-map> öğesi kullanılarak yüklenen haritalar için varsayılan oluşturma türü, eğim ve yön kontrolü etkinleştirilmiş google.maps.RenderingType.VECTOR'dir. <gmp-map> öğesini kullanarak oluşturma türünü ayarlamak için rendering-type özelliğini kullanın.

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

Oluşturma türünü bir harita kimliği kullanarak da belirtebilirsiniz. Bulut Tabanlı Harita Stili'ni kullanma - Harita kimliği alma bölümündeki adımları uygulayarak harita kimliği oluşturun. Harita türünü JavaScript olarak ayarladığınızdan ve bir seçenek (Vektör veya Kafes) belirlediğinizden emin olun. Haritada eğme ve döndürmeyi etkinleştirmek için Eğme ve Döndürme'yi işaretleyin. Böylece bu değerleri programatik olarak ayarlayabilir ve kullanıcıların eğim ile 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ı örneklendirirken mapId özelliğini kullanarak 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'
});

Hangi oluşturma türünün kullanıldığını algılama

Hangi oluşturma türünün kullanıldığını tespit etmek için aşağıdaki örnekte gösterildiği gibi harita nesnesinde getRenderingType() yöntemini çağırın:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```