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

Platform seçin: Android iOS JavaScript

Genel bakış

Bir web sayfasındaki haritanın kullanımı için, kullanıcıların yakınlaştırma ve kaydırma yapmak üzere haritayla nasıl etkileşim kuracağını denetlemek için belirli seçenekler gerekebilir. gestureHandling, minZoom, maxZoom ve restriction gibi seçenekler MapOptions arayüzünde tanımlanır.

Varsayılan Davranış

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

Bu haritanın kodunu aşağıda bulabilirsiniz.

TypeScript

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

JavaScript

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

Hareketi Kullanmayı 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ırılmasına neden olabilir. Bu davranış, gestureHandling harita seçeneği kullanılarak kontrol edilebilir.

hareket işleme: cooperative

Aşağıdaki haritada gestureHandling seçeneği cooperative olarak ayarlanmış olup kullanıcının haritayı yakınlaştırmadan veya kaydırmadan sayfayı normal bir şekilde kaydırmasına olanak tanır. Kullanıcılar, yakınlaştırma denetimlerini tıklayarak haritayı yakınlaştırabilir. Dokunmatik ekranlı cihazlarda, harita üzerinde iki parmakla yapılan hareketleri kullanarak yakınlaştırabilir ve yatay kaydırabilirler.

Bu haritanın kodunu aşağıda bulabilirsiniz.

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ındaki gestureHandling seçeneğinin bulunmadığı harita, bir önceki haritayla aynı davranışa sahiptir. Bu haritadaki tüm haritalar bir <iframe> içinde yer alır ve gestureHandling cooperative olarak ayarlanmıştır. Varsayılan gestureHandling değeri auto, haritanın <iframe> alanında bulunup bulunmadığına bağlı olarak greedy ile cooperative arasında geçiş yapar.

Harita <iframe> dahilindeki Davranış
evet cooperative
no greedy

hareket işleme: greedy

Aşağıda, gestureHandling özelliğinin greedy olarak ayarlandığı bir harita bulunmaktadır. Bu harita, cooperative benzeri olmayan tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki veriyor.

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ırma'yı devre dışı bırakma

Haritayı kaydırma ve yakınlaştırma özelliğini tamamen devre dışı bırakmak için iki seçenek (gestureHandling ve zoomControl) 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 bulunan gestureHandling ve zoomControl birleşimi gösterilmektedir.

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

Hareketlere ve yakınlaştırma denetimlerine izin verirken haritayı belirli bir sınır veya minimum ve maksimum yakınlaştırma düzeyiyle kısıtlamak isteyebilirsiniz. Bunu yapmak için kısıtlama, minZoom ve maxZoom seçeneklerini ayarlayabilirsiniz. Aşağıdaki kod ve haritada bu seçenekler gösterilmektedir.

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