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

Selecciona la plataforma: Android iOS JavaScript

Es posible que desees controlar el movimiento 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 restricciones de la cámara.

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

Restringe los límites del mapa

Para restringir los límites geográficos de la cámara, configura la opción bounds.

En la siguiente muestra de código, se muestra 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>

Restringe la cámara

Para restringir el movimiento de la cámara, configura cualquiera de las siguientes opciones:

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

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

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

Restringe los límites del mapa y la cámara

Puedes restringir los límites del mapa y la cámara de forma simultánea. En el siguiente código de muestra, se muestra cómo restringir los límites del mapa y 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,
};

Controla 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. Para controlar este comportamiento, configura la opción de mapa gestureHandling.

gestureHandling: cooperative

El controlador de gestos "cooperative" permite que el usuario se desplace por la página sin afectar el zoom ni el movimiento lateral del mapa. Para aplicar zoom, los usuarios pueden usar los controles, los gestos con dos dedos (para dispositivos con pantalla táctil) o mantener presionado CMD/CTRL mientras se desplazan.

En el siguiente código, se muestra cómo configurar el controlador 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 controlador de gestos "greedy" reacciona a todos los eventos de desplazamiento y gestos táctiles.

gestureHandling: auto

El manejo de gestos "automático" cambia el comportamiento del mapa según si el mapa está contenido en un <iframe> y si la página se puede desplazar.

  • Si el mapa está dentro de un <iframe>, el controlador de gestos será "cooperative".
  • Si el mapa no está dentro de un <iframe>, el controlador de gestos será "greedy".