Vektör Haritaları

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: kafes ve vektör. Kafes harita varsayılan olarak yüklenir ve haritayı, Google Haritalar Platformu'nun sunucu tarafında üretip web uygulamanıza sunulan piksel tabanlı kafes resim karolarından oluşan bir ızgara olarak yükler. Vektör haritası, yükleme zamanında tarayıcının kullanıcının 2D grafiklerine ve 3. cihazın D2 cihazında GPU'ya erişmesine olanak tanıyan web teknolojisi kullanılarak istemci tarafında çizilen vektör tabanlı bloklardan oluşur.

Vektör haritası, kullanıcılarınızın aşina olduğu Google haritasıyla aynıdır ve varsayılan kafes karo haritasına göre bazı avantajlar sunar. En önemlisi, vektör tabanlı resimlerin keskinliği ve yakın yakınlaştırma düzeylerinde 3D binaların eklenmesidir. Vektör haritası, WebGL Yer Paylaşımlı Görüntüleme ile 3D içerik ekleme, programlı eğme ve yön denetimi, gelişmiş kamera denetimi ve daha yumuşak yakınlaştırma için kesirli yakınlaştırma gibi bazı yeni özellikleri de destekliyor.

Vektör Haritalarını kullanmaya başlama

Kamerayı kontrol etme

Tüm kamera özelliği kombinasyonlarını tek seferde güncellemek için map.moveCamera() işlevini kullanın. map.moveCamera(), güncellenecek tüm kamera özelliklerini içeren tek bir parametreyi kabul eder. Aşağıdaki örnekte center, zoom, heading ve tilt öğelerini aynı anda ayarlamak için map.moveCamera() çağrısı gösterilmektedir:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Aşağıda gösterildiği gibi, bir animasyon döngüsüyle map.moveCamera() yöntemini çağırarak kamera özelliklerini canlandırabilirsiniz:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Kısmi Yakınlaştırma

Vektör haritaları, tamsayılar yerine kesirli değerler kullanarak yakınlaştırmanızı sağlayan kesirli yakınlaştırmayı destekler. Hem kafes hem de vektör haritalar kesirli yakınlaştırmayı desteklerken kesirli yakınlaştırma özelliği, vektör haritaları için varsayılan olarak açık, kafes haritalarda ise kapalıdır. Kesirli yakınlaştırmayı etkinleştirmek ve devre dışı bırakmak için isFractionalZoomEnabled harita seçeneğini kullanın.

Aşağıdaki örnekte, harita başlatılırken kesirli yakınlaştırmanın etkinleştirilmesi gösterilmektedir:

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

Ayrıca, aşağıda gösterildiği gibi isFractionalZoomEnabled harita seçeneğini ayarlayarak da kesirli yakınlaştırmayı açıp kapatabilirsiniz:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Kesirli yakınlaştırmanın açık olup olmadığını tespit edecek bir işleyici ayarlayabilirsiniz. Bu özellik, isFractionalZoomEnabled özelliğini açıkça true veya false değerine ayarlamadıysanız en faydalıdır. Aşağıdaki örnek kod, kesirli yakınlaştırmanın etkin olup olmadığını kontrol eder:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});