Vektör Haritaları

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ında oluşturulan, ardından web uygulamanıza sunulan piksel tabanlı kafes resim parçalarından oluşan bir tablo olarak yüklenir. Vektör haritası, yükleme sırasında istemci tarafında çizilen ve web kullanıcısı tarafından oluşturulan D kartındaki GPU'ya kullanıcının erişmesini sağlayan bir web teknolojisi olan WebGL.

Vektör haritası, kullanıcılarınızın aşina olduğu Google haritasıyla aynıdır. Bu harita, varsayılan raster karo haritasına, özellikle de vektör tabanlı resimlerin keskinliğine ve yakın yakınlaştırma seviyelerinde 3D binalar eklenmesine ilişkin ç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 bir yakınlaştırma için kısmi yakınlaştırma gibi bazı yeni özellikleri de destekliyor.

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 center, zoom, heading ve tilt öğelerini 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üyle map.moveCamera() öğesini çağırarak kamera özelliklerini animasyon olarak gösterebilirsiniz:

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

Kesir Yakınlaştırma

Vektör haritaları, tam sayılar yerine kesirli değerler 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ı desteklese de, kesirli yakınlaştırma, vektör haritaları için varsayılan olarak açık ve istiridye haritaları için varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı açıp 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
});

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

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