Restreindre la vue et les limites de la caméra

Sélectionnez une plate-forme : Android iOS JavaScript

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

L'exemple suivant montre une carte avec des limites d'emplacement définies pour limiter les mouvements 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 restreindre 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 la caméra

Vous pouvez restreindre les mouvements 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 restreindre simultanément les limites de la carte et de la caméra. L'exemple de code suivant montre comment restreindre 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

Le traitement des gestes "coopératif" permet à l'utilisateur de faire défiler la page sans affecter le zoom ni le panoramique de la carte. Pour effectuer un zoom, 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 la page.

Le code suivant montre comment définir le traitement des gestes sur "coopératif" :

<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

Le traitement des gestes "greedy" réagit à tous les événements de défilement et aux gestes tactiles.

gestureHandling: auto

Le traitement 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>, le traitement des gestes sera "coopératif".
  • Si la carte ne se trouve pas dans un <iframe>, le traitement des gestes sera "greedy".