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 Platformu 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, görsel doğruluğu iyileştirir, haritalarda daha iyi önbelleğe alma sağlar ve haritada eğimi ve yönü kontrol etme olanağı sunar. 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.

Bir haritanın oluşturma türünü renderingType harita seçeneğini belirterek veya seçeneği ilişkili bir harita kimliğinde 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 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 haritalarda 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, Haritalar kitaplığı yüklenirken yapılabilir:

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

  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'),
  {
    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

Oluşturma türünü bir harita kimliği kullanarak da 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'
});

Kullanılan oluşturma türünü algılama

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