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

Platform seçin: Android iOS JavaScript

Kameranın kaydırma hareketini, maksimum yüksekliğini kontrol etmek veya kullanıcının belirli bir haritadaki hareketini kısıtlayan enlem ve boylam sınırları oluşturmak isteyebilirsiniz. Bunu kamera kısıtlamalarını kullanarak yapabilirsiniz.

Aşağıdaki örnekte, kameranın hareketini sınırlamak için konum sınırları ayarlanmış 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 kısıtlanması 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 kontrolü ayarı

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

gestureHandling: cooperative

"İşbirliğine dayalı" hareket işleme, kullanıcının haritanın yakınlaştırma veya kaydırma işlevini etkilemeden sayfayı kaydırmasına olanak tanır. Kullanıcılar yakınlaştırma yapmak için kontrolleri, iki parmak hareketlerini (dokunmatik ekranlı cihazlar için) kullanabilir veya kaydırırken CMD/CTRL tuşunu basılı tutabilir.

Aşağıdaki kodda, hareket işleme "cooperative" olarak ayarlanmıştır:

<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

"Greedy" 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 "işbirliğine dayalı" olur.
  • Harita bir <iframe> içinde değilse hareket işleme "greedy" olur.