Yakınlaştırmayı ve Kaydırma

Platformu seçin: Android iOS JavaScript

Genel bakış

Bir web sayfasındaki haritanın kullanımında, kullanıcıların yakınlaştırmak ve kaydırmak için haritayla etkileşimde bulunma şeklini kontrol etmek için belirli seçenekler gerekebilir. gestureHandling, minZoom, maxZoom ve restriction gibi seçenekler MapOptions arayüzünde tanımlanmıştır.

Varsayılan Davranış

Aşağıdaki harita, yalnızca zoom ve center seçenekleriyle tanımlanan bir haritayla gerçekleşen harita etkileşimleri için varsayılan davranışı göstermektedir.

Bu haritanın kodu 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

Hareket İşlemeyi 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 Tutma: cooperative

Aşağıdaki harita, cooperative olarak ayarlanmış gestureHandling seçeneğini kullanır. Bu sayede, kullanıcı sayfayı yakınlaştırmadan veya kaydırmadan normal bir şekilde kaydırabilir. 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 hareketler kullanarak yakınlaştırma ve kaydırma yapabilirler.

Bu haritanın kodu 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 Tutma: auto

Sayfanın üst kısmındaki gestureHandling seçeneği içermeyen harita, gestureHandling öğesi olarak ayarlanmış bir önceki haritayla aynı davranışa sahip. Çünkü bu sayfadaki tüm haritalar bir <iframe> içinde.cooperative 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.

Harita <iframe> içinde bulunuyor Davranış
evet cooperative
no greedy

Hareket Tutma: greedy

gestureHandling için greedy değerine ayarlanmış bir harita aşağıdadır. Bu harita, cooperative gibi tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

Hareket Tutma: 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 gestureHandling ve zoomControl olmak üzere iki seçenek eklenmelidir.

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 harita, yukarıdaki kodda gestureHandling ve ZoomControl kombinasyonunu göstermektedir.

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ırlarla veya minimum ve maksimum yakınlaştırmayla sınırlamak isteyebilirsiniz. Bunun için kısıtlama, minZoom ve maxZoom seçeneklerini ayarlayabilirsiniz. Aşağıdaki kod ve eşleme 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,
    },
  },
});
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