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 yakınlaşmasına neden olabilir. Bu davranış, gestureHandling harita seçeneğini kullanabilirsiniz.

Hareket Yönetimi: cooperative

Aşağıdaki haritada gestureHandling seçenek grubu kullanılmaktadır. cooperative değerine ayarlayarak kullanıcının sayfayı yakınlaştırmadan normal şekilde kaydırmasını sağlayın kaydırabilir veya kaydırabilirsiniz. Kullanıcılar, yakınlaştırma kontrollerini tıklayarak haritayı yakınlaştırabilir. Onlar Dokunmatik ekran için haritada iki parmakla hareketlerle yakınlaştırma ve kaydırma da yapabilir cihazlar.

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

Sayfanın üst kısmındaki, gestureHandling seçeneği olmayan haritada da aynı önceki haritadaki gibi gestureHandling cooperative olarak ayarlanmıştır çünkü bu sayfadaki tüm haritalar bir <iframe>. Varsayılan gestureHandling değeri auto, haritanın şuna bağlı olarak greedy ile cooperative arasında geçiş yapar: <iframe> içinde yer alır.

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

Hareket Yönetimi: greedy

gestureHandling değerine sahip bir harita greedy olarak ayarlanmıştır. bölümüne göz atın. Bu harita tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir cooperative

Hareket Yönetimi: none

gestureHandling seçeneği, Haritadaki hareketleri devre dışı bırakmak için none tuşlarına basın.

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 dahil edilmelidir.

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 gestureHandling ve zoomControl kodu kullanabilirsiniz.

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ırları ve minimum ve maksimum yakınlaştırmayı ayarlayabilirsiniz. Bu amaca ulaşmak için kısıtlama, minZoom'u, ve maxZoom seçeneklerini kullanın. Aşağıdaki kod ve harita nasıl yardımcı olacağını söyleyebilirler.

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