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