Yakınlaştırma ve kaydırma işlemlerini kontrol etme

Platform seçin: Android iOS JavaScript

Genel Bakış

Bir web sayfasında harita kullanmak, kullanıcıların haritayla etkileşim kurma şeklini kontrol etmek için belirli seçenekler gerektirebilir (ör. yakınlaştırma ve kaydırma). gestureHandling, minZoom, maxZoom ve restriction gibi bu seçenekler, MapOptions arayüzünde tanımlanır.

Varsayılan Davranış

Aşağıdaki harita, yalnızca zoom ve center seçenekleri tanımlanarak oluşturulan bir haritayla yapılan harita etkileşimlerinin varsayılan davranışını gösterir.

Bu haritanın kodu aşağıda verilmiştir.

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 işleme kontrolü

Bir kullanıcı harita içeren bir sayfayı kaydırdığında, kaydırma işlemi haritanın istemeden yakınlaşmasına neden olabilir. Bu davranış, gestureHandling harita seçeneği kullanılarak kontrol edilebilir.

gestureHandling: cooperative

Aşağıdaki haritada, gestureHandling seçeneği cooperative olarak ayarlanmıştır. Bu sayede kullanıcı, haritayı yakınlaştırmadan veya kaydırmadan sayfayı normal şekilde kaydırabilir. Kullanıcılar yakınlaştırma kontrollerini tıklayarak haritayı yakınlaştırabilir. Ayrıca dokunmatik ekranlı cihazlarda haritada iki parmakla yakınlaştırma ve kaydırma hareketlerini de kullanabilirler.

Bu haritanın kodu aşağıda verilmiştir.

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

gestureHandling: auto

Sayfanın üst kısmındaki gestureHandling seçeneği olmayan harita, gestureHandling özelliği cooperative olarak ayarlanmış önceki haritayla aynı davranışa sahiptir. Bunun nedeni, bu sayfadaki tüm haritaların <iframe> içinde olmasıdır. Varsayılan gestureHandling değeri auto, haritanın <iframe> içinde olup olmamasına bağlı olarak greedy ile cooperative arasında geçiş yapar.

<iframe> içinde yer alan harita Davranış
evet cooperative
hayır greedy

gestureHandling: greedy

gestureHandling özelliği greedy olarak ayarlanmış bir harita aşağıda gösterilmektedir. Bu harita, cooperative'nın aksine tüm dokunma hareketlerine ve kaydırma etkinliklerine tepki verir.

gestureHandling: none

gestureHandling seçeneği, haritada hareketleri devre dışı bırakmak için none olarak da ayarlanabilir.

Kaydırma ve yakınlaştırmayı devre dışı bırakma

Haritada 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 özelliklerinin birleşimini gösterir.

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 bir sınıra veya minimum ve maksimum yakınlaştırmaya kısıtlamak isteyebilirsiniz. Bunu yapmak için restriction, minZoom ve maxZoom seçeneklerini ayarlayabilirsiniz. Aşağıdaki kod ve harita bu seçenekleri gösterir.

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