Vektör Haritaları

Maps JavaScript API, harita için iki farklı uygulama sunar: kafes ve vektör. Kafes harita varsayılan olarak yüklenir ve haritayı piksel tabanlı kafes görüntü bloklarından oluşan bir ızgara şeklinde yükler. Bu öğeler Google Haritalar Platformu tarafından oluşturulup web uygulamanıza sunulur. Vektör haritası, tarayıcının, kullanıcının grafiklerini 3D grafiklerini ve 3D grafiklerini oluşturmasını sağlayan bir web teknolojisi olan WebGL'yi kullanarak, yükleme sırasında istemci tarafında çizilen vektör tabanlı karolardan oluşur.

Vektör haritası, kullanıcılarınızın kullanmaya alışık olduğu Google haritasıyla aynıdır ve varsayılan kafes desenli haritaya göre çeşitli avantajlar sunar. En önemlisi, vektör tabanlı resimlerin keskinliği ve yakın yakınlaştırma seviyelerinde 3D binaların eklenmesidir. Vektör haritası ayrıca WebGL Yer Paylaşımlı Görünüm ile 3D içerik ekleyebilme, programatik yatırma ve yön kontrolü, gelişmiş kamera kontrolü ve daha yumuşak yakınlaştırma için kesirli yakınlaştırma gibi bazı yeni özellikleri de desteklemektedir.

Vektör Haritalar'ı kullanmaya başlama

Kamerayı kontrol etme

Kamera özelliği kombinasyonlarının herhangi bir kombinasyonunu 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 özelliklerini 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
});

Burada gösterildiği gibi, bir animasyon döngüsüyle map.moveCamera() öğesini ç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);

Kesirli Yakınlaştırma

Vektör haritaları, tamsayılar yerine kesirli değerleri kullanarak yakınlaştırma yapmanıza olanak tanıyan kesirli yakınlaştırmayı destekler. Hem kafes hem de vektör haritalar kesirli yakınlaştırmayı desteklerken kesirli yakınlaştırma, vektör haritalar için varsayılan olarak açık, kafes haritalar için ise varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı etkinleştirmek veya 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
});

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

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

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

Bir işleyiciyi, kesirli yakınlaştırmanın açık olup olmadığını algılayacak şekilde ayarlayabilirsiniz. Bu, isFractionalZoomEnabled öğesini açıkça true veya false olarak ayarlamadıysanız çok yararlı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');
  }
});