Kamera-Ansicht und Grenzen einschränken

Plattform auswählen: Android iOS JavaScript

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

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

Kartengrenzen beschränken

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

Das folgende Codebeispiel zeigt, wie Sie die Kartengrenzen beschränken:

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

Das folgende Codebeispiel zeigt, wie Sie die Kamera einschränken:

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

Kartengrenzen und Kameragrenzen einschränken

Sie können sowohl die Kartengrenzen als auch die Kameragrenzen gleichzeitig einschränken. Das folgende Codebeispiel zeigt, wie Sie sowohl die Kartengrenzen als auch die Kameragrenzen einschränken:

// 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. Sie können dieses Verhalten mit der Kartenoption gestureHandling steuern.

gestureHandling: cooperative

Bei der „kooperativen“ Verarbeitung von Touch-Gesten kann der Nutzer auf der Seite scrollen, ohne dass sich das Zoomen oder Schwenken der Karte ändert. Zum Zoomen können Nutzer die Steuerelemente, Zwei-Finger Gesten (für Touchscreen-Geräte) oder die Tastenkombination CMD/CTRL + Scrollen verwenden.

Der folgende Code zeigt, wie Sie die Verarbeitung von Touch-Gesten auf „kooperativ“ festlegen:

<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 „gierigen“ Verarbeitung von Touch-Gesten wird auf alle Scrollereignisse und Touch-Gesten reagiert.

gestureHandling: auto

Bei der „automatischen“ Verarbeitung von Touch-Gesten ändert sich das Verhalten der Karte je nachdem, ob sie in einem <iframe> enthalten ist und ob die Seite scrollbar ist.

  • Wenn sich die Karte in einem <iframe> befindet, wird die Verarbeitung von Touch-Gesten auf "kooperativ" festgelegt.
  • Wenn sich die Karte nicht in einem <iframe> befindet, wird die Verarbeitung von Touch-Gesten auf „gierig“ festgelegt.