Kamera-Ansicht und Grenzen einschränken

Plattform auswählen: Android iOS JavaScript

Möglicherweise möchten Sie die Schwenkbewegung und die maximale Höhe der Kamera steuern oder Grenzen für den Breiten- und Längengrad festlegen, um die Bewegung eines Nutzers auf einer bestimmten Karte einzuschränken. Dazu können Sie Kameraeinschränkungen verwenden.

Das folgende Beispiel zeigt eine Karte mit Standortgrenzen, die die Bewegung der Kamera einschränken:

Kartengrenzen einschränken

Sie können die geografischen Grenzen der Kamera einschränken, indem Sie die Option bounds festlegen.

Im folgenden Codebeispiel wird gezeigt, wie die Kartengrenzen eingeschränkt werden:

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>

Kamera einschränken

Sie können die Bewegung der Kamera einschränken, indem Sie eine der folgenden Optionen festlegen:

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

Im folgenden Codebeispiel wird gezeigt, wie die Kamera eingeschränkt wird:

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

Karten- und Kameragrenzen einschränken

Sie können sowohl die Karten- als auch die Kameragrenzen gleichzeitig einschränken. Im folgenden Codebeispiel wird gezeigt, wie sowohl Karten- als auch Kameragrenzen eingeschränkt werden:

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

Festlegen, wie Touch-Gesten verarbeitet werden

Scrollt ein Nutzer auf einer Seite mit einer Karte, löst das möglicherweise ungewollt ein Zoomen aus. Dieses Verhalten lässt sich mit der Kartenoption gestureHandling steuern.

gestureHandling: cooperative

Mit der Einstellung „cooperative“ können Nutzer die Seite scrollen, ohne dass die Karte dadurch vergrößert bzw. verkleinert oder geschwenkt wird. Nutzer können die Steuerelemente, Zwei-Finger-Gesten (für Touchscreen-Geräte) oder die Taste CMD/CTRL beim Scrollen verwenden, um zu zoomen.

Im folgenden Code wird die Gestenbedienung auf „cooperative“ festgelegt:

<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

Bei der Gestenverarbeitung „greedy“ wird auf alle Scroll-Ereignisse und Touch-Gesten reagiert.

gestureHandling: auto

Bei der automatischen Gestenverarbeitung ändert sich das Verhalten der Karte je nachdem, ob die Karte in einem <iframe> enthalten ist und ob die Seite scrollbar ist.

  • Wenn sich die Karte in einem <iframe> befindet, ist die Gestenverarbeitung „cooperative“.
  • Wenn sich die Karte nicht in einem <iframe> befindet, ist die Gestenverarbeitung „greedy“.