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 seçenekler MapOptions arayüzünde tanımlanı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. Dokunmatik ekranlı cihazlarda harita üzerinde iki parmağınızla hareket ederek de 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", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
Hareket Yönetimi: 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ırma'yı 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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
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, }, }, });
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, }, }, });