Vektör Haritaları

Maps JavaScript API, iki farklı harita uygulaması sunar: kafes ve vektör. Kafes harita varsayılan olarak yüklenir ve haritayı, Google Haritalar Platformu tarafından sunucu tarafında oluşturulan ve daha sonra web uygulamanıza sunulan piksel tabanlı kafes resim karolarından oluşan bir ızgara olarak yüklenir. Vektör haritası, yükleme sırasında istemci tarafında yüklenirken çizilen ve tarayıcının kullanıcının 2D grafiklerindeki GPU'ya ve cihazın 3. D grafiklerini oluşturmasına olanak tanıyan web teknolojisi kullanılarak çizilen vektör tabanlı bloklardan oluşur.

Vektör haritası, kullanıcılarınızın alışık olduğu Google haritasıyla aynıdır ve varsayılan kafes karo haritasına göre bazı avantajlar sunar. Bu avantajlar arasında özellikle vektör tabanlı görüntülerin keskinliği ve yakın yakınlaştırma düzeylerinde 3D binaların eklenmesi yer alır. Vektör haritası ayrıca, WebGL Yer Paylaşımlı Görünümü ile 3D içerik ekleyebilme, programlı eğme ve yön kontrolü, gelişmiş kamera kontrolü ve daha yumuşak yakınlaştırma için kısmi yakınlaştırma gibi bazı yeni özellikleri de desteklemektedir.

Vektör Haritalarını kullanmaya başlama

Kamerayı kontrol etme

Tüm kamera özelliği kombinasyonlarını aynı anda 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 aynı anda center, zoom, heading ve tilt 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() ç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, vektör haritaları için varsayılan olarak açık, kafesli haritalar içinse varsayılan olarak 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, haritayı başlatı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ı, burada 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});

Kesirli yakınlaştırmanın açık olup olmadığını algılayacak şekilde bir işleyici ayarlayabilirsiniz. Bu özellik, isFractionalZoomEnabled özelliğini açıkça true veya false olarak ayarlamadıysanız çok yararlıdır. Aşağıdaki örnek kod, kısmi 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');
  }
});