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: raster ve vektör. Kafes haritası varsayılan olarak yüklenir ve Google Haritalar Platformu sunucu tarafı tarafından oluşturulan, ardından web uygulamanıza sunulan piksel tabanlı raster resim kartlarından oluşan bir ızgara olarak yüklenir. Vektör haritası, istemci tarafında yükleme sırasında çizilen ve kullanıcının GPU'ya kendi arayüzüyle erişmesini sağlayan bir web teknolojisi olan WebGL'yi kullanır.33D;

Vektör haritası, kullanıcılarınızın aşina olduğu Google haritasıyla aynıdır. Bu harita, varsayılan piksel karo haritasına, özellikle de vektör tabanlı resimlerin keskinliği ve yakın yakınlaştırma seviyelerinde 3D binalara ek bir avantaj sağlar. Vektör haritası, WebGL Yer Paylaşımı Görünümü ile 3D içerik ekleyebilme, programatik yatırma ve başlık kontrolü, gelişmiş kamera kontrolü ve daha akıcı 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

Herhangi bir kamera özelliği 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 tek seferde ayarlamak için map.moveCamera() çağrısı yapılıyor:

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

Kesirli Yakınlaştırma

Vektör haritaları, tam sayı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, ölçekleme 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 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
});

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

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

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

Kesirli yakınlaştırmanın etkinleştirilip etkinleştirilmediğini algılayacak bir dinleyici ayarlayabilirsiniz. Bu özellik, isFractionalZoomEnabled özelliğini açıkça true veya false olarak ayarlamadıysanız en faydalı seçenektir. 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');
  }
});