Kamerapfade animieren

Plattform auswählen: Android iOS JavaScript

Sie können Ihrer 3D-Karte Animationen für Kamerapfade hinzufügen, um Nutzern eine noch intensivere Erfahrung zu bieten. Bei Kamerapfad-Animationen kann die Kamera zu einem Punkt auf der Karte fliegen oder ihn umfliegen.

Im folgenden Beispiel werden die Animationen flyCameraTo und flyCameraAround kombiniert:

Vollständigen Quellcode des Beispiels ansehen

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>

Voreingestellte Kamerapfade

3D Maps in Maps JavaScript bietet zwei voreingestellte Kamerapfade. Die Kamerapfade können angepasst werden, indem die Dauer der Animation geändert wird (wodurch die Geschwindigkeit erhöht oder verringert wird) oder indem sie kombiniert werden, um ein kinoreiferes Erlebnis zu schaffen. Außerdem können Sie die Höhe der Kamera mit altitudeMode festlegen.

Die API „3D-Karten in Google Maps – JavaScript“ unterstützt die folgenden Kamerapfade:

  • Die flyCameraTo-Animation fliegt von der Kartenmitte zu einem angegebenen Ziel.
  • Bei der flyCameraAround-Animation wird die Karte um die angegebene Anzahl von Umdrehungen um einen Punkt auf der Karte gedreht.

Die beiden verfügbaren Pfade können kombiniert werden, um zu einem Point of Interest zu fliegen, sich um ihn herum zu drehen und dann an der angegebenen Stelle anzuhalten.

Anfliegen

Im folgenden Codebeispiel wird gezeigt, wie die Kamera animiert wird, um zu einem Ort zu fliegen:

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

Herumfliegen

Im folgenden Codebeispiel wird gezeigt, wie die Kamera animiert wird, um einen Ort zu umfliegen:

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

Animationen kombinieren

Im folgenden Codebeispiel wird gezeigt, wie Sie Animationen kombinieren, um die Kamera zu einem Ort zu bewegen und dann um den Ort zu drehen, wenn die erste Animation endet:

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();