Vektör Haritaları

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: kafes ve vektör. Kafes haritası varsayılan olarak yüklenir ve Google Haritalar Platformu sunucu tarafı tarafından oluşturulan ve ardından web uygulamanıza sunulan piksel tabanlı kafes resim parçalarından oluşan bir ızgara olarak yüklenir. Vektör haritası, istemci tarafında yükleme sırasında alınan ve kullanıcının kullanıcı grafiklerinde kullanıcının GPU'suna GPU'ya erişmesini sağlayan bir web teknolojisi olan WebGL kullanılarak vektör tabanlı kartlardan oluşur.

Vektör haritası, kullanıcılarınızın aşina olduğu Google haritasıyla aynıdır ve varsayılan raster karo haritasına, özellikle de vektör tabanlı resimlerin keskinliğine ve yakın yakınlaştırma seviyelerinde 3D binalara yönelik çeşitli avantajlar sunar. Vektör haritası, WebGL Yer Paylaşımı Görünümü ile 3D içerik ekleme, programatik eğim ve başlık 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 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 özelliklerini aynı anda ayarlamak için map.moveCamera() işlevi aranır:

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üyle map.moveCamera() numarasını çağırarak kamera özelliklerini animasyon haline getirebilirsiniz:

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ı, tam sayılar yerine kesirli değerleri kullanarak yakınlaştırma yapmanızı sağlayan kesirli yakınlaştırmayı destekler. Hem raster hem de vektör haritaları kesirli yakınlaştırmayı desteklerken kesirli yakınlaştırma, vektör haritaları için varsayılan olarak etkindir. Rastgele haritalar için ise varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı etkinleştirmek ve devre dışı bırakmak için isFractionalZoomEnabled eşleme 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ırma özelliğini 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});

Kesirli yakınlaştırmanın açık olup olmadığını algılamak için bir dinleyici ayarlayabilirsiniz. Bu araç, isFractionalZoomEnabled özelliğini açıkça true veya false olarak ayarlamadığınız durumlarda kullanışlı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');
  }
});