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ı Google Haritalar Platform sunucu tarafında oluşturulan ve ardından web uygulamanıza sunulan piksel tabanlı raster görüntü kutucukları şeklinde yükler. Vektör harita, yükleme sırasında istemci tarafında WebGL kullanılarak çizilen vektör tabanlı kutucuklardan oluşur. WebGL, tarayıcının 2D ve 3D grafikler oluşturmak için kullanıcının cihazındaki GPU'ya erişmesine olanak tanıyan bir web teknolojisidir.

Vektör harita türü, en iyi kullanıcı deneyimi için önerilir. Bu tür, gelişmiş görsel doğruluk, haritalarda daha iyi önbelleğe alma ve haritada eğimi ve yönü kontrol etme olanağı sağlar. 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 varsayılanıyla <div> öğesi kullanan haritalar, raster oluşturma türünü kullanır.

renderingType harita seçeneğini belirterek veya ilişkili bir harita kimliğinde seçeneği ayarlayarak haritanın oluşturma türünü ayarlayın. 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 kafes 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'dir. renderingType seçeneğini ayarlamak için aşağıdaki adımları uygulayın:

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

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

  2. Haritayı başlatırken renderingType seçeneğini kullanarak RenderingType.VECTOR veya RenderingType.RASTER'yi belirtin:

    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ğme özelliğini etkinleştirmek için tiltInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setTiltInteractionEnabled(true)'ı arayın.
  • Kaydırmayı etkinleştirmek için headingInteractionEnabled harita seçeneğini true olarak ayarlayın veya map.setHeadingInteractionEnabled(true)'ı arayın.

<gmp-map> öğesi kullanılarak yüklenen haritalarda varsayılan oluşturma türü google.maps.RenderingType.VECTOR'dir. Bu türde eğme ve yön kontrolü etkindir. Oluşturma türünü <gmp-map> öğesini kullanarak ayarlamak için rendering-type özelliğini kullanın.

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

Harita kimliği kullanarak da oluşturma türünü belirtebilirsiniz. Bulut tabanlı harita stilini kullanma - Harita kimliği edinme bölümündeki adımları uygulayarak bir harita kimliği oluşturun. Harita türünü JavaScript olarak ayarladığınızdan emin olun ve bir seçenek belirleyin (Vektör veya Kafes). Haritada eğme ve döndürme özelliklerini etkinleştirmek için Eğme ve Döndürme'yi işaretleyin. Bu sayede, bu değerleri programatik olarak ayarlayabilir ve kullanıcıların eğimi ve başlığı doğrudan harita üzerinde ayarlamasına olanak tanıyabilirsiniz. Eğme veya yönün kullanılması uygulamanızı olumsuz etkileyecekse kullanıcıların eğme ve döndürme ayarlarını yapamaması için Eğme ve Döndürme seçeneklerinin işaretini kaldırı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'
});

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

Hangi oluşturma türünün kullanıldığını algılamak için aşağıdaki örnekte gösterildiği gibi harita nesnesinde getRenderingType() işlevini ç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()}`);
  });```