Kamera görünümünü ve sınırlarını kısıtlama

Platformu seçin: Android iOS JavaScript

Kameranın yatay hareketini, maksimum yüksekliğini kontrol etmek veya belirli bir haritada kullanıcının hareketini kısıtlayan enlem ve boylam sınırları oluşturmak isteyebilirsiniz. Bu işlemi kamera kısıtlamalarını kullanarak yapabilirsiniz.

Aşağıdaki örnekte, kameranın hareketini sınırlamak için konum sınırlarının ayarlandığı bir harita gösterilmektedir:

Harita sınırlarını kısıtlama

bounds seçeneğini ayarlayarak kameranın coğrafi sınırlarını kısıtlayabilirsiniz.

Aşağıdaki kod örneğinde, harita sınırlarının nasıl kısıtlanacağı gösterilmektedir:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Kamerayı kısıtlama

Aşağıdaki seçeneklerden herhangi birini ayarlayarak kameranın hareketini kısıtlayabilirsiniz:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

Aşağıdaki kod örneğinde kameranın nasıl kısıtlanacağı gösterilmektedir:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

Harita ve kamera sınırlarını kısıtlama

Hem harita hem de kamera sınırlarını aynı anda kısıtlayabilirsiniz. Aşağıdaki kod örneğinde hem harita hem de kamera sınırlarının nasıl kısıtlanacağı gösterilmektedir:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Hareket işleme kontrolü

Kullanıcı harita içeren bir sayfayı kaydırdığında kaydırma işlemi, haritanın yanlışlıkla yakınlaşmasına neden olabilir. gestureHandling harita seçeneğini ayarlayarak bu davranışı kontrol edebilirsiniz.

gestureHandling: cooperative

"İşbirlikçi" hareket işleme, kullanıcının haritanın yakınlaştırmasını veya kaydırmasını etkilemeden sayfayı kaydırmasına olanak tanır. Kullanıcılar yakınlaştırmak için kontrolleri, iki parmakla yapılan hareketleri (dokunmatik ekranlı cihazlarda) veya kaydırırken CMD/CTRL tuşunu basılı tutmayı kullanabilir.

Aşağıdaki kodda, hareket işleme özelliğinin "işbirlikçi" olarak ayarlanması gösterilmektedir:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

"Açgözlü" hareket işleme, tüm kaydırma etkinliklerine ve dokunma hareketlerine tepki verir.

gestureHandling: auto

"Otomatik" hareket işleme, haritanın davranışını haritanın bir <iframe> içinde olup olmamasına ve sayfanın kaydırılabilir olup olmamasına bağlı olarak değiştirir.

• Harita bir <iframe> içindeyse hareket işleme "ortak" olur.
• Harita bir <iframe> içinde değilse hareket işleme "açgözlü" olur.