Restreindre la vue et les limites de la caméra

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez contrôler le panoramique de la caméra, l'altitude maximale ou créer des limites de latitude et de longitude pour restreindre les mouvements d'un utilisateur sur une carte donnée. Pour ce faire, vous pouvez utiliser les restrictions de caméra.

L'exemple suivant montre une carte avec des limites de localisation définies pour limiter le mouvement de la caméra :

Restreindre les limites de la carte

Vous pouvez restreindre les limites géographiques de la caméra en définissant l'option bounds.

L'exemple de code suivant montre comment limiter les limites de la carte :

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>

Restreindre l'appareil photo

Vous pouvez restreindre le mouvement de la caméra en définissant l'une des options suivantes :

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

L'exemple de code suivant montre comment restreindre la caméra :

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

Restreindre les limites de la carte et de la caméra

Vous pouvez limiter simultanément les limites de la carte et de la caméra. L'exemple de code suivant montre comment limiter les limites de la carte et de la caméra :

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

Contrôler le traitement des gestes

Lorsque l'utilisateur fait défiler une page contenant une carte, il peut la zoomer par inadvertance. Vous pouvez contrôler ce comportement en définissant l'option de carte gestureHandling.

gestureHandling : cooperative

La gestion "coopérative" des gestes permet à l'utilisateur de faire défiler la page sans modifier le zoom ni le panoramique de la carte. Pour zoomer, les utilisateurs peuvent utiliser les commandes, les gestes à deux doigts (pour les appareils à écran tactile) ou maintenir la touche CMD/CTRL enfoncée tout en faisant défiler l'écran.

Le code suivant montre comment définir la gestion des gestes sur "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 gestion "greedy" des gestes réagit à tous les événements de défilement et gestes tactiles.

gestureHandling : auto

La gestion des gestes "Auto" modifie le comportement de la carte selon qu'elle est contenue ou non dans un <iframe>, et selon que la page est défilable ou non.

  • Si la carte se trouve dans un <iframe>, la gestion des gestes sera "coopérative".
  • Si la carte ne se trouve pas dans un <iframe>, la gestion des gestes sera "greedy".