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:

TypeScript

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

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

JavaScript

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

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Örneği deneyin

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.