Restringe la vista y los límites de la cámara

Selecciona la plataforma: Android iOS JavaScript

Es posible que quieras controlar el desplazamiento lateral de la cámara, la altitud máxima o crear límites de latitud y longitud que restrinjan el movimiento de un usuario en un mapa determinado. Puedes hacerlo con las restricciones de la cámara.

En el siguiente ejemplo, se muestra un mapa con límites de ubicación establecidos para restringir el movimiento de la cámara:

Restringe los límites del mapa

Puedes restringir los límites geográficos de la cámara configurando la opción bounds.

En la siguiente muestra de código, se indica cómo restringir los límites del mapa:

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>

Restringir la cámara

Puedes restringir el movimiento de la cámara configurando cualquiera de las siguientes opciones:

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

En la siguiente muestra de código, se indica cómo restringir la cámara:

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

Cómo restringir los límites del mapa y de la cámara

Puedes restringir los límites del mapa y de la cámara de forma simultánea. En la siguiente muestra de código, se indica cómo restringir los límites del mapa y de la cámara:

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

Cómo utilizar el controlador de gestos

Cuando un usuario se desplaza por una página que contiene un mapa, puede hacer zoom en este de manera no intencional. Puedes controlar este comportamiento si configuras la opción de mapa gestureHandling.

gestureHandling: cooperative

El control de gestos "cooperativo" permite que el usuario se desplace por la página sin afectar el zoom ni el desplazamiento lateral del mapa. Para acercar o alejar la imagen, los usuarios pueden usar los controles, los gestos con dos dedos (en dispositivos con pantalla táctil) o mantener presionada la tecla CMD/CTRL mientras se desplazan.

En el siguiente código, se muestra cómo configurar el control de gestos en "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

El control de gestos "Greedy" reacciona a todos los eventos de desplazamiento y gestos táctiles.

gestureHandling: auto

El control de gestos "Auto" cambia el comportamiento del mapa según si este se encuentra o no en un <iframe> y si la página se puede desplazar.

  • Si el mapa se encuentra dentro de un <iframe>, el control de gestos será "cooperativo".
  • Si el mapa no está dentro de un <iframe>, el control de gestos será "greedy".