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