Yakınlaştırmayı ve Kaydırma

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Platform seçin: Android iOS JavaScript

Genel bakış

Bir haritanın web sayfasında kullanılması için, kullanıcıların haritayı yakınlaştırmak ve kaydırmak amacıyla nasıl etkileşimde bulunacağını kontrol etmek üzere belirli seçenekler gerekebilir. gestureHandling, minZoom, maxZoom ve restriction gibi bu seçenekler MapOptions arayüzünde tanımlanır.

Varsayılan Davranış

Aşağıdaki haritada, yalnızca zoom ve center seçenekleriyle tanımlanan bir haritayla harita etkileşimleri için varsayılan davranış gösterilmektedir.

Bu haritanın kodu aşağıdadır.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});

Hareket İşlemeyi Kontrol Etme

Kullanıcılar harita içeren bir sayfayı kaydırdığında, kaydırma işlemi yanlışlıkla haritanın yakınlaştırmasına neden olabilir. Bu davranış, gestureHandling harita seçeneği kullanılarak kontrol edilebilir.

hareket işleme: cooperative

Aşağıdaki harita, cooperative olarak ayarlanan gestureHandling seçeneğini kullanır. Bu şekilde, kullanıcı haritayı yakınlaştırmadan veya kaydırmadan normal bir şekilde kaydırabilir. Kullanıcılar yakınlaştırma kontrollerini tıklayarak haritayı yakınlaştırabilir. Ayrıca, dokunmatik ekranlı cihazlar için haritada iki parmakla yapılan hareketleri kullanarak yakınlaştırıp kaydırabilirler.

Bu haritanın kodu aşağıdadır.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});

Örneği Göster

hareket işleme: auto

Sayfanın üst kısmında, gestureHandling seçeneğinin bulunmadığı harita, önceki harita gestureHandling olarak ayarlanan haritayla aynı davranışa sahip. Bu sayfadaki tüm haritalar bir <iframe> içinde yer alıyor. Varsayılan gestureHandling değeri auto, haritanın bir <iframe> içinde yer alıp almadığına bağlı olarak greedy ile cooperative arasında geçiş yapar.

Harita <iframe> içindedir Davranış
evet cooperative
hayır greedy

hareket işleme: greedy

gestureHandling alanı greedy olarak ayarlanmış bir harita aşağıdadır. Bu harita, cooperative gibi tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

hareket işleme: none

Haritadaki hareketleri devre dışı bırakmak için gestureHandling seçeneği de none olarak ayarlanabilir.

Kaydırma ve Yakınlaştırmayı devre dışı bırakma

Haritayı kaydırma ve yakınlaştırma özelliğini tamamen devre dışı bırakmak için gestureHandling ve ZoomControl olmak üzere iki seçenek eklenmelidir.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

Aşağıdaki haritada, yukarıdaki kodda gestureHandling ve ZoomControl kombinasyonu gösterilmektedir.

Harita Sınırlarını ve Yakınlaştırmayı Kısıtlama

Hareketlere ve yakınlaştırma kontrollerine izin verirken haritayı belirli sınırlarla veya minimum ve maksimum yakınlaştırmayla kısıtlamak isteyebilirsiniz. Bunun için kısıtlama, minZoom ve maxZoom seçeneklerini ayarlayabilirsiniz. Aşağıdaki kod ve harita bu seçenekleri göstermektedir.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});