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

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:

TypeScript

async function init(): Promise<void> {
    await google.maps.importLibrary('maps3d');

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

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

JavaScript

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

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

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

CSS

html,
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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            id="gmp-map-3d"
            center="-47.1375,169.5235,150000"
            tilt="67.5"
            mode="hybrid"
            gesture-handling="cooperative">
        </gmp-map-3d>
    </body>
</html>

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:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

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:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
    north: 20.93,
    west: -156.38,
    south: 20.90,
    east: -156.31,
};

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 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:

<gmp-map-3d
    id="gmp-map-3d"
    center="20.92,-156.36,500"
    tilt="67.5"
    mode="hybrid"
    gesture-handling="cooperative">
</gmp-map-3d>

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.