Animowanie ścieżek kamery

Wybierz platformę: Android iOS JavaScript

Możesz dodać do mapy 3D animacje ścieżek kamery, aby zapewnić użytkownikom bardziej wciągające wrażenia. Animacje ścieżek kamery mogą przelatywać do punktu na mapie lub wokół niego.

Poniższy przykład łączy animacje flyCameraTo i flyCameraAround:

Zobacz pełny kod źródłowy przykładu

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>

Gotowe ścieżki kamery

Mapy 3D w Mapach JavaScript udostępniają 2 gotowe ścieżki kamery. Ścieżki kamery można dostosować, zmieniając czas trwania animacji (zwiększając lub zmniejszając prędkość) albo łącząc je, aby uzyskać bardziej filmowe wrażenia. Możesz też kontrolować wysokość kamery, określając altitudeMode.

Mapy 3D w Mapach JavaScript obsługują te ścieżki kamery:

  • Animacja flyCameraTo przelatuje z środka mapy do określonego miejsca docelowego.
  • Animacja flyCameraAround obraca się wokół punktu na mapie o określoną liczbę obrotów.

Dostępne ścieżki można połączyć, aby przelatywać do interesującego miejsca, obracać się wokół niego, a następnie zatrzymać się w określonym momencie.

Przejdź do

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała do lokalizacji:

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

Przelatuj wokół

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała wokół lokalizacji:

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

Łączenie animacji

Poniższy przykładowy kod pokazuje, jak połączyć animacje, aby przelatywać kamerą do lokalizacji, a następnie obracać się wokół niej po zakończeniu pierwszej animacji:

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