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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
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", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
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, }, }, });
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, }, }, });