Haritayı ve kamerayı kontrol etme

Platform 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();

Önceden ayarlanmış kamera rotaları

Maps JavaScript'teki 3D Haritalar, iki hazır kamera yolu sunar. Animasyonun süresini değiştirerek (böylece hızı artırarak veya azaltarak) ya da daha sinematik deneyimler oluşturmak için birleştirerek kamera yollarını özelleştirebilirsiniz.

Maps JavaScript'teki 3D Haritalar aşağıdaki kamera yollarını destekler:

• flyCameraTo animasyonu, harita merkezinden belirtilen bir hedefe doğru uçuyor.
• flyCameraAround animasyonu, haritada belirtilen sayıda dönüş yaparak bir nokta etrafında döner.

İlgi çekici bir noktaya uçmak, etrafında dönmek ve belirtilen zamanda durmak için iki mevcut yol birleştirilebilir.

Git

Aşağıdaki kod örneğinde, kameranın bir konuma uçmasını sağlayacak şekilde nasıl animasyon oluşturulacağı gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Uçarak dolaşma

Aşağıdaki kod örneğinde, kameranın bir konumun etrafında uçacak şekilde nasıl animasyonlandırılacağı gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Animasyonları birleştirme

Aşağıdaki kod örneğinde, kamerayı bir konuma uçurmak ve ilk animasyon sona erdiğinde konumun etrafında döndürmek için animasyonların nasıl birleştirileceği gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

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ırma veya kaydırma özelliğini etkilemeden sayfayı kaydırmasına olanak tanır. Kullanıcılar yakınlaştırmak için kontrolleri, iki parmakla hareketleri (dokunmatik ekranlı cihazlar için) 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 bir <iframe> içinde olup olmamasına ve sayfanın kaydırılabilir olup olmamasına bağlı olarak haritanın davranışını 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.