Animer les chemins de caméras

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez ajouter des animations de trajectoire de caméra à votre carte 3D pour offrir une expérience plus immersive à vos utilisateurs. Les animations de trajectoire de caméra peuvent survoler un point de la carte ou tourner autour.

L'exemple suivant combine les animations flyCameraTo et flyCameraAround :

Afficher l'exemple de code source complet

TypeScript

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

    const map = new Map3DElement({
        center: {
            lat: 37.79810773998413,
            lng: -122.41784275049939,
            altitude: 89.08476932205978,
        },
        range: 6062.016931506805,
        tilt: 81.17100663963272,
        heading: -56.047035719765596,
    });

    map.mode = 'SATELLITE';

    document.body.append(map);

    // Used for both the fly to function and the location to fly around.
    const flyToCamera = {
        center: {
            lat: 21.263523536467105,
            lng: -157.80663691939296,
            altitude: 80.28936069489404,
        },
        range: 1500.8202963253427,
        tilt: 76.9173260789542,
        heading: -44.59196007522445,
    };

    // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
    map.flyCameraTo({
        // Where we are going to.
        endCamera: flyToCamera,
        // How long we want the flight to take.
        durationMillis: 30000,
    });
    // When the animation has completed, fly around the location.
    map.addEventListener(
        'gmp-animationend',
        () => {
            map.flyCameraAround({
                // Location to fly around.
                camera: flyToCamera,
                // Length of time to fly to the location.
                durationMillis: 50000,
                // Number of rotations to make in the specified time.
                repeatCount: 1,
            });
        },
        { once: true }
    ); // Stop animation after flying around.

    // At any time stop the animation.
    map.addEventListener('gmp-click', () => {
        map.stopCameraAnimation();
    });
}

void init();

JavaScript

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

    const map = new Map3DElement({
        center: {
            lat: 37.79810773998413,
            lng: -122.41784275049939,
            altitude: 89.08476932205978,
        },
        range: 6062.016931506805,
        tilt: 81.17100663963272,
        heading: -56.047035719765596,
    });

    map.mode = 'SATELLITE';

    document.body.append(map);

    // Used for both the fly to function and the location to fly around.
    const flyToCamera = {
        center: {
            lat: 21.263523536467105,
            lng: -157.80663691939296,
            altitude: 80.28936069489404,
        },
        range: 1500.8202963253427,
        tilt: 76.9173260789542,
        heading: -44.59196007522445,
    };

    // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
    map.flyCameraTo({
        // Where we are going to.
        endCamera: flyToCamera,
        // How long we want the flight to take.
        durationMillis: 30000,
    });
    // When the animation has completed, fly around the location.
    map.addEventListener(
        'gmp-animationend',
        () => {
            map.flyCameraAround({
                // Location to fly around.
                camera: flyToCamera,
                // Length of time to fly to the location.
                durationMillis: 50000,
                // Number of rotations to make in the specified time.
                repeatCount: 1,
            });
        },
        { once: true }
    ); // Stop animation after flying around.

    // At any time stop the animation.
    map.addEventListener('gmp-click', () => {
        map.stopCameraAnimation();
    });
}

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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Trajectoires de caméra prédéfinies

3D Maps dans Maps JavaScript propose deux chemins de caméra prédéfinis. Les trajectoires de la caméra peuvent être personnalisées en modifiant la durée de l'animation (ce qui augmente ou diminue la vitesse) ou en les combinant pour créer des expériences plus cinématographiques. Vous pouvez également contrôler la hauteur de la caméra en spécifiant altitudeMode.

Les cartes 3D dans Maps JavaScript sont compatibles avec les trajectoires de caméra suivantes :

  • L'animation flyCameraTo passe du centre de la carte à une destination spécifiée.
  • L'animation flyCameraAround tourne autour d'un point de la carte selon le nombre de tours spécifié.

Les deux trajectoires disponibles peuvent être combinées pour voler vers un point d'intérêt, tourner autour de celui-ci, puis s'arrêter au moment spécifié.

Aller à

L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :

map.flyCameraTo({
    // Where we are going to.
    endCamera: flyToCamera,
    // How long we want the flight to take.
    durationMillis: 30000,
});

Survoler

L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :

map.flyCameraAround({
    // Location to fly around.
    camera: flyToCamera,
    // Length of time to fly to the location.
    durationMillis: 50000,
    // Number of rotations to make in the specified time.
    repeatCount: 1,
});

Combiner des animations

L'exemple de code suivant montre comment combiner des animations pour déplacer la caméra vers un emplacement, puis la faire pivoter autour de cet emplacement lorsque la première animation se termine :

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

    const map = new Map3DElement({
        center: {
            lat: 37.79810773998413,
            lng: -122.41784275049939,
            altitude: 89.08476932205978,
        },
        range: 6062.016931506805,
        tilt: 81.17100663963272,
        heading: -56.047035719765596,
    });

    map.mode = 'SATELLITE';

    document.body.append(map);

    // Used for both the fly to function and the location to fly around.
    const flyToCamera = {
        center: {
            lat: 21.263523536467105,
            lng: -157.80663691939296,
            altitude: 80.28936069489404,
        },
        range: 1500.8202963253427,
        tilt: 76.9173260789542,
        heading: -44.59196007522445,
    };

    // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
    map.flyCameraTo({
        // Where we are going to.
        endCamera: flyToCamera,
        // How long we want the flight to take.
        durationMillis: 30000,
    });
    // When the animation has completed, fly around the location.
    map.addEventListener(
        'gmp-animationend',
        () => {
            map.flyCameraAround({
                // Location to fly around.
                camera: flyToCamera,
                // Length of time to fly to the location.
                durationMillis: 50000,
                // Number of rotations to make in the specified time.
                repeatCount: 1,
            });
        },
        { once: true }
    ); // Stop animation after flying around.

    // At any time stop the animation.
    map.addEventListener('gmp-click', () => {
        map.stopCameraAnimation();
    });
}

void init();