Restreindre la vue et les limites de la caméra

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez contrôler le panoramique et 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, vous pouvez utiliser les restrictions de l'appareil photo.

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 limiter 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() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Essayer l'exemple

Restreindre l'accès à la caméra

Vous pouvez limiter 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 :

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

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 :

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Contrôler la gestion des gestes

Lorsqu'un 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 des gestes "coopérative" permet à l'utilisateur de faire défiler la page sans affecter le zoom ni le panoramique de la carte. Pour faire un zoom, les utilisateurs peuvent utiliser les commandes, les gestes à deux doigts (pour les appareils à écran tactile) ou en maintenant 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 "coopérative" :

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling : greedy

La gestion des gestes "greedy" 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".