Vektör Haritaları

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: kafes anlamına gelir. Kafes harita varsayılan olarak yüklenir ve haritayı Google Haritalar Platformu tarafından oluşturulan piksel tabanlı kafes resim karoları web uygulamanıza sunulur. Vektör haritası, yükleme sırasında istemci tarafında çizilen vektör tabanlı karolar WebGL olan web teknolojisi, tarayıcının kullanıcının cihazındaki GPU'ya erişmesine olanak tanır. 2D ve 3D grafikler oluşturmak üzere tasarlanmış bir cihaz.

Vektör haritası, kullanıcılarınızın kullanmaya alışık olduğu Google haritasıyla ve varsayılan raster karo haritaya göre bazı avantajlar sunar. En önemlisi, vektör tabanlı görüntülerin keskinliği ve yakına doğru 3D binaların eklenmesi yakınlaştırma seviyeleridir. Vektör haritası, WebGL Yer Paylaşımlı Görünüm ile 3D içerik ekleme, programlı yatırma ve yön kontrolü, gelişmiş kamera kontrolü ve daha yumuşak için kesirli yakınlaştırma yakınlaştırın.

Vektör Haritalar'ı kullanmaya başlama

Kamerayı kontrol etme

Herhangi bir kamera kombinasyonunu güncellemek için map.moveCamera() işlevini kullanın ayarlayabilirsiniz. map.moveCamera(), aşağıdakileri içeren tek bir parametreyi kabul eder: tüm kamera özelliklerini seçin. Aşağıdaki örnekte, center, zoom, heading ve tilt uygulamalarını aynı anda ayarlamak için map.moveCamera():

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

map.moveCamera() öğesini çağırarak kamera özelliklerini animasyonlu hale getirebilirsiniz. animasyon döngüsünü izleyin:

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ı kullanarak yakınlaştırmanızı sağlayan kesirli yakınlaştırmayı destekler. değerlerini kullanabilirsiniz. Hem kafes hem de vektör haritaları kesirli değerleri desteklerken yakınlaştırma, kesirli yakınlaştırma, vektör haritalar için varsayılan olarak açık, kafes haritalar. Kesirli değere çevirmek için isFractionalZoomEnabled harita seçeneğini kullanın yakınlaştırın ve kapatı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ı, aynı zamanda Burada gösterildiği gibi isFractionalZoomEnabled harita seçeneği:

// 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ılaması için bir işleyici ayarlayabilirsiniz. bu isFractionalZoomEnabled değerini açıkça true olarak ayarlamadıysanız en yararlı olur veya false. Aşağıdaki örnek kod, kesirli yakınlaştırmanın olup olmadığını kontrol eder. etkin:

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