Yakınlaştırma ve Kaydırmayı 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 için haritayla etkileşime girme biçimini kontrol etmeye yönelik özel seçenekler gerektirebilir. gestureHandling, minZoom, maxZoom ve restriction gibi bu seçenekler, MapOptions arayüzünde tanımlanmıştır.

Varsayılan Davranış

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

Bu haritaya ait kod aşağıdadır.

TypeScript

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

JavaScript

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

Hareketle İşlemeyi Kontrol Etme

Kullanıcı 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 Yönetimi: cooperative

Aşağıdaki haritada, cooperative olarak ayarlanmış gestureHandling seçeneği kullanılmaktadır. Bu seçenek, 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 kontrollerini tıklayarak haritayı yakınlaştırabilir. Ayrıca, dokunmatik ekranlı cihazlar için haritada iki parmakla yapılan hareketlerle yakınlaştırma ve kaydırma yapabilirler.

Bu haritaya ait kod aşağıdadır.

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

Örneği Görüntüle

Hareket Yönetimi: auto

Bu sayfadaki tüm haritalar bir <iframe> içinde yer aldığından, sayfanın üst kısmındaki gestureHandling seçeneğinin olmadığı harita, gestureHandling özelliğinin cooperative olarak ayarlandığı bir önceki haritayla 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
no greedy

Hareket Yönetimi: greedy

Aşağıda, gestureHandling değerinin greedy olarak ayarlandığı bir harita verilmiştir. Bu harita, cooperative'in aksine tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

Hareket Yönetimi: none

gestureHandling seçeneği, haritadaki hareketleri devre dışı bırakmak için none olarak da ayarlanabilir.

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

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

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

Hareketlere ve yakınlaştırma denetimlerine izin vermek, ancak haritayı belirli sınırlarla veya minimum ve maksimum zumla kısıtlamak istenebilir. Bunun 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,
    },
  },
});
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