Membatasi tampilan dan batas kamera

Pilih platform: Android iOS JavaScript

Anda dapat mengontrol geser kamera, ketinggian maksimum, atau membuat batas lintang dan bujur yang membatasi pergerakan pengguna di peta tertentu. Anda dapat melakukannya menggunakan pembatasan kamera.

Contoh berikut menunjukkan peta dengan batas lokasi yang ditetapkan untuk membatasi pergerakan kamera:

Membatasi batas peta

Anda dapat membatasi batas geografis kamera dengan menetapkan opsi bounds.

Contoh kode berikut menunjukkan cara membatasi batas peta:

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>

Membatasi kamera

Anda dapat membatasi gerakan kamera dengan menetapkan salah satu opsi berikut:

  • maxAltitude
  • minAltitude
  • maxHeading
  • minHeading
  • maxTilt
  • minTilt

Contoh kode berikut menunjukkan cara membatasi kamera:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

Membatasi batas peta dan kamera

Anda dapat membatasi batas peta dan kamera secara bersamaan. Contoh kode berikut menunjukkan pembatasan batas peta dan kamera:

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

Mengontrol penanganan gestur

Jika pengguna men-scroll halaman yang berisi peta, tindakan scroll dapat memperbesar peta secara tidak sengaja. Anda dapat mengontrol perilaku ini dengan menetapkan opsi peta gestureHandling.

gestureHandling: cooperative

Penanganan gestur "Cooperative" memungkinkan pengguna men-scroll halaman tanpa memengaruhi zoom atau penggeseran peta. Untuk memperbesar, pengguna dapat menggunakan kontrol, gestur dua jari (untuk perangkat layar sentuh), atau dengan menahan CMD/CTRL sambil men-scroll.

Kode berikut menunjukkan cara menyetel penanganan gestur ke "cooperative":

<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

Penanganan gestur "Greedy" bereaksi terhadap semua peristiwa scroll dan gestur sentuh.

gestureHandling: auto

Penanganan gestur "Auto" mengubah perilaku peta bergantung pada apakah peta dimuat dalam <iframe> atau tidak, dan apakah halaman dapat di-scroll.

  • Jika peta berada dalam <iframe>, penanganan gestur akan bersifat "kooperatif".
  • Jika peta tidak berada dalam <iframe>, penanganan gestur akan bersifat "greedy".