Limitare l'inquadratura e i limiti della videocamera

Seleziona la piattaforma: Android iOS JavaScript

Potresti voler controllare la panoramica della videocamera, l'altitudine massima o creare confini di latitudine e longitudine che limitano i movimenti di un utente in una determinata mappa. Puoi farlo utilizzando le limitazioni della fotocamera.

L'esempio seguente mostra una mappa con i confini della località impostati per limitare il movimento della fotocamera:

Limita i limiti della mappa

Puoi limitare i confini geografici della videocamera impostando l'opzione bounds.

Il seguente esempio di codice mostra come limitare i limiti della mappa:

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>

Limita la fotocamera

Puoi limitare il movimento della videocamera impostando una delle seguenti opzioni:

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

Il seguente esempio di codice mostra come limitare la fotocamera:

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

Limita i confini della mappa e della videocamera

Puoi limitare contemporaneamente i limiti della mappa e della fotocamera. Il seguente esempio di codice mostra come limitare i confini della mappa e della fotocamera:

// 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,
};

Gestione dei gesti di controllo

Quando un utente scorre una pagina contenente una mappa, l'azione di scorrimento può inavvertitamente causare lo zoom della mappa. Puoi controllare questo comportamento impostando l'opzione della mappa gestureHandling.

gestureHandling: cooperative

La gestione dei gesti "cooperativa" consente all'utente di scorrere la pagina senza influire sullo zoom o sulla panoramica della mappa. Per aumentare o diminuire lo zoom, gli utenti possono utilizzare i controlli, i gesti con due dita (per i dispositivi touchscreen) o tenere premuto CMD/CTRL mentre scorrono.

Il seguente codice mostra l'impostazione della gestione dei gesti su "cooperative":

<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

La gestione dei gesti "greedy" reagisce a tutti gli eventi di scorrimento e ai gesti di tocco.

gestureHandling: auto

La gestione dei gesti "Auto" modifica il comportamento della mappa a seconda che la mappa sia contenuta o meno in un <iframe> e che la pagina sia scorrevole.

  • Se la mappa si trova all'interno di un <iframe>, la gestione dei gesti sarà "cooperative".
  • Se la mappa non si trova all'interno di un <iframe>, la gestione dei gesti sarà "greedy".