Yakınlaştırma ve kaydırma işlemlerini kontrol etme

Platform seçin: Android iOS JavaScript

Genel Bakış

Bir web sayfasında harita kullanımı, kullanıcıların yakınlaştırma ve kaydırma yapmak için haritayla etkileşim kurma şeklini kontrol eden belirli seçenekler gerektirebilir. 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ış bir haritayla yapılan harita etkileşimlerinin 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ı harita içeren bir sayfayı kaydırdığında, kaydırma işlemi istemeden haritanın yakınlaştırılmasına neden olabilir. Bu davranış, gestureHandling harita seçeneği kullanılarak kontrol edilebilir.

gestureHandling: cooperative

Aşağıdaki haritada gestureHandling seçeneği cooperative olarak ayarlanmıştır. Bu sayede kullanıcı, haritayı yakınlaştırmadan veya kaydırmadan sayfayı normal şekilde kaydırabilir. Kullanıcılar, yakınlaştırma kontrollerini tıklayarak haritayı yakınlaştırabilir. Dokunmatik ekranlı cihazlarda harita üzerinde iki parmakla yapılan hareketleri kullanarak yakınlaştırma ve kaydırma da yapabilirler.

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örüntüle

gestureHandling: auto

Sayfanın üst kısmında gestureHandling seçeneği olmayan harita, gestureHandling değeri cooperative olarak ayarlanmış önceki haritayla aynı şekilde davranır. Bunun nedeni, bu sayfadaki tüm haritaların bir <iframe> içinde olmasıdır. Varsayılan gestureHandling değeri auto, haritanın bir <iframe> içinde yer alıp almadığına bağlı olarak greedy ve cooperative arasında geçiş yapar.

<iframe> içinde yer alan harita Davranış
evet cooperative
hayır greedy

gestureHandling: greedy

gestureHandling parametresinin greedy olarak ayarlandığı bir harita aşağıda gösterilmiştir. Bu harita, cooperative haritasının aksine tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

gestureHandling: none

gestureHandling seçeneği, haritadaki hareketleri devre dışı bırakmak için none olarak da 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 seçeneklerinin eklenmesi gerekir.

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'ün kombinasyonu gösterilmektedir.

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

Hareketlere ve yakınlaştırma kontrollerine izin vermek ancak haritayı belirli bir sınırla veya minimum ve maksimum yakınlaştırmayla kısıtlamak isteyebilirsiniz. Bunu yapmak için restriction, 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,
    },
  },
});