Vektör Haritaları

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: raster ve vektör. Rastır harita varsayılan olarak yüklenir ve haritayı, Google Haritalar Platformu tarafından sunucu tarafında oluşturulan ve ardından web uygulamanıza sunulan piksel tabanlı raster resim karolarından oluşan bir ızgara olarak yükler. Vektör harita, 2D ve 3D grafikleri oluşturmak için tarayıcının kullanıcının cihazındaki GPU'ya erişmesine olanak tanıyan bir web teknolojisi olan WebGL kullanılarak istemci tarafında yükleme sırasında çizilen vektör tabanlı karolardan oluşur.

Vektör haritası, kullanıcılarınızın aşina olduğu Google Haritalar'dır. Varsayılan raster karo haritasına kıyasla birçok avantajı vardır. En önemlisi, vektör tabanlı görüntülerin keskinliği ve yakın yakınlaştırma düzeylerinde 3D binaların eklenmesidir. Vektör harita, WebGL Yerleşimi Görünümü ile 3D içerik ekleme, programatik eğim 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 destekler.

Vektör Haritalar'ı kullanmaya başlama

Kamerayı kontrol etme

Kamera özelliklerinin herhangi bir kombinasyonunu 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, center, zoom, heading ve tilt değerlerini 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, animasyon döngüsü ile 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);

Kesirli Yakınlaştırma

Vektör haritalar, kesirli yakınlaştırmayı destekler. Bu sayede tam sayılar yerine kesirli değerler kullanarak yakınlaştırabilirsiniz. Hem raster hem de vektör haritalar kesirli yakınlaştırmayı destekler. Kesirli yakınlaştırma, vektör haritalar için varsayılan olarak açık, raster haritalar için ise varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı açmak veya kapatmak 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, isFractionalZoomEnabled harita seçeneğini burada gösterildiği gibi ayarlayarak 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ı algılayacak bir dinleyici ayarlayabilirsiniz. Bu, isFractionalZoomEnabled değerini true veya false olarak açıkça ayarlamadıysanız en yararlı yöntemdir. Aşağıdaki örnek kodda, kesirli yakınlaştırmanın etkin olup olmadığı kontrol edilir:

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');
  }
});