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

Platform seçin: Android iOS JavaScript

Genel Bakış

Web sayfasında harita kullanımı, kullanıcıların yakınlaştırma ve kaydırma için harita ile etkileşim şeklini kontrol etmek üzere 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 harita etkileşimlerinin varsayılan davranışı gösterilmektedir.

Bu haritanın kodu aşağıda verilmiştir.

TypeScript

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

JavaScript

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

Hareket İşleme İşlemini Denetleme

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 ayar, kullanıcının haritayı yakınlaştırmadan veya kaydırmadan sayfayı normal şekilde kaydırmasına olanak tanır. Kullanıcılar yakınlaştırma kontrollerini tıklayarak haritayı yakınlaştırabilir. Dokunmatik ekranlı cihazlarda harita üzerinde iki parmak hareketlerini kullanarak da yakınlaştırma ve kaydırma yapabilirler.

Bu haritanın kodu aşağıda verilmiştir.

TypeScript

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

JavaScript

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

Örnek Görüntüle

gestureHandling: auto

Sayfanın üst kısmındaki gestureHandling seçeneği olmayan harita, bu sayfadaki tüm haritalar bir <iframe> içinde olduğu için gestureHandling özelliği cooperative olarak ayarlanmış önceki harita ile aynı davranışa sahiptir. Varsayılan gestureHandling değeri auto, haritanın bir <iframe> içinde bulunup bulunmadığına bağlı olarak greedy ile cooperative arasında geçiş yapar.

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

gestureHandling: greedy

gestureHandling özelliği greedy olarak ayarlanmış bir harita aşağıda verilmiştir. Bu harita, cooperative'ten farklı olarak tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

gestureHandling: none

Haritadaki hareketleri devre dışı bırakmak için gestureHandling seçeneğini none olarak da ayarlayabilirsiniz.

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

JavaScript

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

Aşağıdaki haritada, yukarıdaki kodda gestureHandling ve zoomControl'un birlikte kullanımı 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 sınırlar veya minimum ve maksimum yakınlaştırmayla kısıtlamak isteyebilirsiniz. Bunu yapmak 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,
    },
  },
});
index.ts

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