Kamera-Ansicht und Grenzen einschränken

Plattform auswählen: Android iOS JavaScript

Möglicherweise möchten Sie die Schwenkung 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() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
    });

    document.body.append(map);
}

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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

Testbeispiel

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:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

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:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

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 steuern, indem Sie die Kartenoption gestureHandling festlegen.

gestureHandling: cooperative

Bei der kooperativen Gestenverarbeitung kann der Nutzer auf der Seite scrollen, ohne dass sich das auf das Zoomen oder Schwenken der Karte auswirkt. 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 Gestenverarbeitung auf „cooperative“ festlegen:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

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

gestureHandling: auto

Bei der „auto“-Gestenverarbeitung ä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, ist die Gestenverarbeitung "cooperative".
  • Wenn sich die Karte nicht in einem <iframe> befindet, ist die Gestenverarbeitung "greedy".