Street View-Dienst

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Übersicht

Plattform auswählen: Android iOS JavaScript

Google Street View bietet 360-Grad-Panoramaansichten für bestimmte Straßen im Abdeckungsbereich. Die Street View API-Abdeckung ist mit der für die Google Maps App (https://maps.google.com/) identisch. Die Liste der Städte, die derzeit für Street View unterstützt werden, findest du auf der Google Maps-Website.

Ein Beispiel eines Street View-Bildes ist nachfolgend abgebildet.


Die Maps JavaScript API bietet einen Street View-Dienst zum Abrufen und Bearbeiten der Bilder, die in Google Maps Street View verwendet werden. Dieser Street View-Dienst wird nativ im Browser unterstützt.

Street View-Karten verwenden

Obwohl Street View in einem eigenständigen DOM-Element verwendet werden kann, ist es bei der Angabe eines Standorts auf einer Karte besonders nützlich. Standardmäßig ist Street View auf einer Karte aktiviert und in den Navigationssteuerelementen (Zoom und Schwenken) wird ein Pegman-Steuerelement für Street View angezeigt. Du kannst dieses Steuerelement im MapOptions der Karte ausblenden, indem du streetViewControl auf false setzt. Du kannst auch die Standardposition des Street View-Steuerelements ändern. Setze dazu das streetViewControlOptions.position-Attribut von Map auf ein neues ControlPosition.

Mit dem Pegman-Steuerelement für Street View können Sie Street View-Panoramen direkt auf der Karte ansehen. Wenn der Nutzer auf den Pegman klickt und ihn hält, wird die Karte aktualisiert und blaue Straßen um ihn herum werden für Street View-fähige Straßen angezeigt. Das ist ähnlich wie bei der Google Maps App.

Wenn der Nutzer die Pegman-Markierung auf einer Straße platziert, wird die Karte aktualisiert und zeigt ein Street View-Panorama des betreffenden Orts an.

Street View-Panoramen

Street View-Bilder werden durch die Verwendung des StreetViewPanorama-Objekts unterstützt, das eine API-Schnittstelle zu einem Street View-Betrachter bietet. Jede Karte enthält ein standardmäßiges Street View-Panorama, das Sie durch Aufrufen der Methode getStreetView() der Karte abrufen können. Wenn Sie der Karte ein Street View-Steuerelement hinzufügen, indem Sie die Option streetViewControl auf true setzen, verbinden Sie das Pegman-Steuerelement automatisch mit diesem Street View-Standardpanorama.

Sie können auch ein eigenes StreetViewPanorama-Objekt erstellen und festlegen, dass die Karte dieses anstelle des Standardobjekts verwenden soll. Legen Sie dazu das streetView-Attribut der Karte explizit auf dieses konstruierte Objekt fest. Wenn Sie das Standardverhalten ändern möchten, z. B. die automatische Freigabe von Overlays zwischen der Karte und dem Panorama, können Sie das Standardpanorama überschreiben. Weitere Informationen finden Sie unten unter Overlays in Street View.

Street View-Container

Möglicherweise möchtest du stattdessen ein StreetViewPanorama in einem separaten DOM-Element anzeigen, oft ein <div>-Element. Übergib einfach das DOM-Element im Konstruktor von StreetViewPanorama. Für eine optimale Anzeige von Bildern empfehlen wir eine Mindestgröße von 200 x 200 Pixeln.

Hinweis: Die Street View-Funktionalität ist zwar zur Verwendung in Verbindung mit einer Karte vorgesehen, aber nicht zwingend erforderlich. Sie können ein eigenständiges Street View-Objekt ohne Karte verwenden.

Street View-Standorte und Point-of-View (POV)

Mit dem Konstruktor StreetViewPanorama können Sie auch den Standort und den Blickwinkel in Street View mit dem Parameter StreetViewOptions festlegen. Sie können nach der Konstruktion setPosition() und setPov() für das Objekt aufrufen, um Standort und Blickwinkel zu ändern.

Der Street View-Standort definiert die Position des Kamerafokus für ein Bild, jedoch nicht die Ausrichtung der Kamera für dieses Bild. Zu diesem Zweck definiert das Objekt StreetViewPov zwei Properties:

  • heading (Standard 0) definiert den Rotationswinkel um den Kamerastandort in Grad bezogen auf den geografischen Nordpol. Die Richtung wird im Uhrzeigersinn gemessen (90 Grad entsprechen also dem geografischen Osten).
  • pitch (Standard 0) definiert die Winkelabweichung aus dem anfänglichen Standardneigungswinkel, der oft (aber nicht immer) flach horizontal ist. (Beispiel: Ein Bild, das auf einem Berg aufgenommen wurde, weist vermutlich einen Standardneigungswinkel auf, der nicht horizontal ist.) Bei einer Neigung nach oben weisen die Neigungswinkel positive Werte auf: bis zu +90 Grad bei senkrechter Neigung nach oben, im rechten Winkel zur Standardneigung. Bei einer Neigung nach unten sind die Werte negativ: bis zu -90 Grad bei senkrechter Neigung nach unten, im rechten Winkel zur Standardneigung.

Das Objekt StreetViewPov wird meistens verwendet, um den Blickwinkel der Street View-Kamera zu bestimmen. Außerdem können Sie mit der Methode StreetViewPanorama.getPhotographerPov() den Blickwinkel des Fotografen bestimmen. Dieser entspricht in der Regel der Ausrichtung des Fahrzeugs oder Trikes.

Der folgende Code zeigt eine Karte von Boston mit einer Anfangsansicht des Fenway-Parks. Wenn Sie den Pegman auswählen und ihn an einen unterstützten Ort auf der Karte ziehen, ändert sich das Street View-Panorama:

TypeScript

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: fenway,
      zoom: 14,
    }
  );
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement,
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

declare global {
  interface Window {
    initialize: () => void;
  }
}
window.initialize = initialize;

JavaScript

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    }
  );

  map.setStreetView(panorama);
}

window.initialize = initialize;

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}

HTML

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Bewegungsverfolgung auf Mobilgeräten

Auf Geräten, die Geräteausrichtungsereignisse unterstützen, bietet die API Nutzern die Möglichkeit, den Street View-Sicht basierend auf der Bewegung des Geräts zu ändern. Nutzer können sich umschauen, indem sie ihre Geräte bewegen. Dies wird als Bewegungs- oder Geräterotations-Tracking bezeichnet.

Als App-Entwickler können Sie das Standardverhalten wie folgt ändern:

  • Bewegungsverfolgung aktivieren oder deaktivieren. Standardmäßig ist das Bewegungs-Tracking auf jedem Gerät aktiviert, das es unterstützt. Im folgenden Beispiel wird die Bewegungsverfolgung deaktiviert, das Steuerelement für das Bewegungstracking bleibt jedoch sichtbar. (Der Nutzer kann die Bewegungsverfolgung durch Tippen auf das Steuerelement aktivieren.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Steuerelement für Bewegungsverfolgung ein- oder ausblenden. Standardmäßig wird die Steuerung auf Geräten angezeigt, die Bewegungsverfolgung unterstützen. Nutzer können auf das Steuerelement tippen, um die Bewegungsverfolgung zu aktivieren oder zu deaktivieren. Die Steuerung wird nie angezeigt, wenn das Gerät die Bewegungsverfolgung nicht unterstützt, unabhängig vom Wert von motionTrackingControl.

    Im folgenden Beispiel wird sowohl die Bewegungsverfolgung als auch die Steuerung für das Bewegungstracking deaktiviert. In diesem Fall kann der Nutzer das Bewegungs-Tracking nicht aktivieren:

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • Standardposition des Steuerelements für Bewegungsverfolgung ändern. Standardmäßig wird das Steuerelement rechts unten im Panorama angezeigt (Position RIGHT_BOTTOM). Im folgenden Beispiel wird die Position des Steuerelements auf den unteren linken Rand festgelegt:
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTrackingControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });
    

Sieh dir das folgende Beispiel auf einem Mobilgerät oder einem anderen Gerät an, das Ereignisse der Geräteausrichtung unterstützt:


Beispiel ansehen

Überlagerungen in Street View

Das standardmäßige StreetViewPanorama-Objekt unterstützt die native Anzeige von Karten-Overlays. Overlays werden im Allgemeinen auf Straßenebene angezeigt und sind an LatLng-Positionen verankert. (Diese werden beispielsweise angezeigt, wenn ihr Schwanz auf der horizontalen Ebene des Standorts im Street View-Panorama verankert ist.)

Derzeit sind die in Street View-Panoramen unterstützten Overlay-Typen auf Markers, InfoWindows und benutzerdefinierte OverlayViews beschränkt. Overlays, die Sie auf einer Karte einblenden, können in einem Street View-Panorama angezeigt werden. Sie werden dadurch als Ersatz für das Map-Objekt behandelt. Rufen Sie dazu setMap() auf und übergeben Sie StreetViewPanorama als Argument anstelle einer Karte. Ähnlich können Infofenster innerhalb eines Street View-Panoramas geöffnet werden. Rufen Sie dazu open() auf und übergeben Sie StreetViewPanorama() anstelle einer Karte.

Außerdem werden beim Erstellen einer Karte mit der Standardeinstellung StreetViewPanorama alle auf der Karte erstellten Markierungen automatisch mit dem zugehörigen Street View-Panorama der Karte gemeinsam genutzt, vorausgesetzt, das Panorama ist sichtbar. Um das Standard-Street View-Panorama abzurufen, rufen Sie getStreetView() für das Objekt Map auf. Wenn Sie das Attribut streetView der Karte explizit auf einen StreetViewPanorama Ihrer eigenen Konstruktion festlegen, wird das Standardpanorama überschrieben.

Das folgende Beispiel zeigt Markierungen für verschiedene Standorte um Astor Place, New York City. Schalte die Anzeige in Street View ein, damit die geteilten Markierungen im StreetViewPanorama angezeigt werden.

TypeScript

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };

  // Set up the map
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: astorPlace,
      zoom: 18,
      streetViewControl: false,
    }
  );

  document
    .getElementById("toggle")!
    .addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView()!; // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView(): void {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let panorama;

function initMap() {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };
  // Set up the map
  const map = new google.maps.Map(document.getElementById("map"), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false,
  });

  document.getElementById("toggle").addEventListener("click", toggleStreetView);

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView(); // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView() {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  margin-left: -100px;
}

HTML

<html>
  <head>
    <title>Overlays Within Street View</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="floating-panel">
      <input type="button" value="Toggle Street View" id="toggle" />
    </div>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Street View-Ereignisse

Wenn Sie zwischen Street View wechseln oder ihre Ausrichtung ändern, bietet es sich an, mehrere Ereignisse im Blick zu behalten, die Änderungen des StreetViewPanorama-Status anzeigen:

  • pano_changed wird immer dann ausgelöst, wenn sich die individuelle Pano-ID ändert. Dieses Ereignis ist keine Garantie dafür, dass sich die zugehörigen Daten im Panorama (z. B. die Links) zum Zeitpunkt der Auslösung dieses Ereignisses geändert haben. Es zeigt lediglich an, dass sich die Pano-ID geändert hat. Die Panorama-ID, mit der Sie auf dieses Panorama verweisen können, ist nur während der aktuellen Browsersitzung stabil.
  • position_changed wird immer dann ausgelöst, wenn sich die zugrunde liegende Position (LatLng) des Panoramas ändert. Das Drehen eines Panoramas löst dieses Ereignis nicht aus. Sie können die zugrunde liegende Position eines Panoramas ändern, ohne die zugehörige Pano-ID zu ändern, da die API der Panoramaposition automatisch die nächstgelegene Pano-ID zuordnet.
  • pov_changed wird immer dann ausgelöst, wenn sich StreetViewPov in Street View ändert. Dieses Ereignis kann ausgelöst werden, während Position und Panorama-ID stabil bleiben.
  • links_changed wird immer dann ausgelöst, wenn sich die Links in Street View ändern. Dieses Ereignis kann möglicherweise asynchron nach einer Änderung der Panorama-ID ausgelöst werden, die durch pano_changed angegeben wird.
  • visible_changed wird ausgelöst, wenn sich die Sichtbarkeit von Street View ändert. Dieses Ereignis kann möglicherweise asynchron nach einer Änderung der Panorama-ID ausgelöst werden, die durch pano_changed angegeben wird.

Der folgende Code zeigt, wie diese Ereignisse verarbeitet werden können, um Daten über die zugrunde liegende StreetViewPanorama zu erfassen:

TypeScript

function initPano() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement,
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0,
      },
      visible: true,
    }
  );

  panorama.addListener("pano_changed", () => {
    const panoCell = document.getElementById("pano-cell") as HTMLElement;

    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table") as HTMLElement;

    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild as ChildNode);
    }

    const links = panorama.getLinks();

    for (const i in links) {
      const row = document.createElement("tr");

      linksTable.appendChild(row);

      const labelCell = document.createElement("td");

      labelCell.innerHTML = "<b>Link: " + i + "</b>";

      const valueCell = document.createElement("td");

      valueCell.innerHTML = links[i].description as string;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById(
      "position-cell"
    ) as HTMLElement;

    (positionCell.firstChild as HTMLElement).nodeValue =
      panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell") as HTMLElement;
    const pitchCell = document.getElementById("pitch-cell") as HTMLElement;

    (headingCell.firstChild as HTMLElement).nodeValue =
      panorama.getPov().heading + "";
    (pitchCell.firstChild as HTMLElement).nodeValue =
      panorama.getPov().pitch + "";
  });
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;

JavaScript

function initPano() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0,
      },
      visible: true,
    }
  );

  panorama.addListener("pano_changed", () => {
    const panoCell = document.getElementById("pano-cell");

    panoCell.innerHTML = panorama.getPano();
  });
  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table");

    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }

    const links = panorama.getLinks();

    for (const i in links) {
      const row = document.createElement("tr");

      linksTable.appendChild(row);

      const labelCell = document.createElement("td");

      labelCell.innerHTML = "<b>Link: " + i + "</b>";

      const valueCell = document.createElement("td");

      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });
  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById("position-cell");

    positionCell.firstChild.nodeValue = panorama.getPosition() + "";
  });
  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell");
    const pitchCell = document.getElementById("pitch-cell");

    headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
  });
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#pano {
  width: 50%;
  height: 100%;
  float: left;
}

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

HTML

<html>
  <head>
    <title>Street View Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Street View-Steuerelemente

Beim Anzeigen einer StreetViewPanorama werden standardmäßig verschiedene Steuerelemente auf dem Panorama angezeigt. Sie können diese Steuerelemente aktivieren oder deaktivieren. Legen Sie dazu die entsprechenden Felder in StreetViewPanoramaOptions auf true oder false fest:

  • Mit panControl lässt sich das Panorama drehen. Dieses Steuerelement wird standardmäßig als integrierte Kompass- und Schwenksteuerung angezeigt. Sie können die Position des Steuerelements ändern, indem Sie PanControlOptions im Feld panControlOptions angeben.
  • Mit zoomControl kannst du das Bild heranzoomen. Dieses Steuerelement wird standardmäßig rechts unten im Panorama angezeigt. Sie können das Erscheinungsbild des Steuerelements ändern, indem Sie ZoomControlOptions im Feld zoomControlOptions angeben.
  • Ein addressControl stellt ein Text-Overlay bereit, das die Adresse des entsprechenden Standorts angibt, und bietet einen Link zum Öffnen des Standorts in Google Maps. Sie können das Erscheinungsbild des Steuerelements ändern, indem Sie StreetViewAddressControlOptions im Feld addressControlOptions angeben.
  • Ein fullscreenControl bietet die Möglichkeit, Street View im Vollbildmodus zu öffnen. Sie können das Erscheinungsbild des Steuerelements ändern, indem Sie FullscreenControlOptions im Feld fullscreenControlOptions angeben.
  • Ein motionTrackingControl bietet die Möglichkeit, das Bewegungstracking auf Mobilgeräten zu aktivieren oder zu deaktivieren. Dieses Steuerelement wird nur auf Geräten angezeigt, die Geräteausrichtungsereignisse unterstützen. Standardmäßig wird das Steuerelement rechts unten im Panorama angezeigt. Sie können die Position des Steuerelements ändern, indem Sie MotionTrackingControlOptions angeben. Weitere Informationen findest du im Abschnitt zum Bewegungs-Tracking.
  • Ein linksControl stellt Leitpfeile auf dem Bild bereit, mit denen man sich in angrenzende Panoramabilder bewegen kann.
  • Über ein Steuerelement „Close“ können Benutzer das Street View-Anzeigeprogramm schließen. Sie können das Steuerelement „Schließen“ aktivieren oder deaktivieren. Legen Sie dazu enableCloseButton auf true oder false fest.

Im folgenden Beispiel werden die in der zugehörigen Street View-Ansicht angezeigten Steuerelemente geändert und die Links der Ansicht entfernt:

TypeScript

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;

JavaScript

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Street View Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Street View-Daten direkt aufrufen

Möglicherweise möchten Sie die Verfügbarkeit von Street View-Daten programmatisch ermitteln oder Informationen zu bestimmten Panoramen zurückgeben, ohne eine Karte oder ein Panorama direkt bearbeiten zu müssen. Dazu können Sie das Objekt StreetViewService verwenden, das eine Schnittstelle zu den Daten bietet, die im Street View-Dienst von Google gespeichert sind.

Street View-Dienstanforderungen

Der Zugriff auf den Street View-Dienst erfolgt asynchron, da die Google Maps API einen externen Server aufrufen muss. Aus diesem Grund muss eine Callback-Methode übergeben werden, die bei Abschluss der Anfrage ausgeführt wird. Diese Callback-Methode verarbeitet das Ergebnis.

Sie können Anfragen an StreetViewService mit StreetViewPanoRequest oder StreetViewLocationRequest initiieren.

Eine Anfrage mit StreetViewPanoRequest gibt Panoramadaten mit einer Referenz-ID zurück, mit der das Panorama eindeutig identifiziert wird. Diese Referenz-IDs sind nur für die Lebensdauer der Bilder dieses Panoramas stabil.

Eine Anfrage mit StreetViewLocationRequest sucht nach Panoramadaten an einem bestimmten Standort und verwendet dabei die folgenden Parameter:

  • location gibt den Standort (Breiten- und Längengrad) an, um nach einem Panorama zu suchen.
  • Mit preference wird festgelegt, welches Panorama innerhalb des Umkreises gefunden werden soll: das Panorama, das dem angegebenen Standort am nächsten ist, oder das beste Panorama innerhalb des Umkreises.
  • radius legt einen Radius in Metern fest, in dem nach einem Panorama gesucht werden soll. Das Bild ist zentriert auf dem angegebenen Breiten- und Längengrad. Wenn kein Wert angegeben ist, wird der Standardwert 50 verwendet.
  • source gibt die Quelle der zu suchenden Panoramen an. Gültige Werte sind:
    • default verwendet die Standardquellen für Street View. Suchanfragen sind nicht auf bestimmte Quellen beschränkt.
    • outdoor schränkt die Suchanfragen auf Outdoor-Sammlungen ein. Es kann vorkommen, dass für den angegebenen Ort keine Außenansichten vorhanden sind.

Street View-Dienstantworten

Die Funktion getPanorama() benötigt eine Callback-Funktion, die nach dem Abrufen eines Ergebnisses vom Street View-Dienst ausgeführt wird. Diese Callback-Funktion gibt einen Satz von Panoramadaten innerhalb eines StreetViewPanoramaData-Objekts und einen StreetViewStatus-Code zurück, der den Status der Anfrage in dieser Reihenfolge angibt.

Eine StreetViewPanoramaData-Objektspezifikation enthält Metadaten zu einem Street View-Panorama in der folgenden Form:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

Beachten Sie, dass dieses Datenobjekt selbst kein StreetViewPanorama-Objekt ist. Wenn Sie aus diesen Daten ein Street View-Objekt erstellen möchten, müssen Sie ein StreetViewPanorama erstellen und setPano() aufrufen. Übergeben Sie dabei die ID aus dem zurückgegebenen Feld location.pano.

Der Code status kann einen der folgenden Werte zurückgeben:

  • OK gibt an, dass der Dienst ein passendes Panorama gefunden hat.
  • ZERO_RESULTS gibt an, dass der Dienst kein passendes Panorama mit den übergebenen Kriterien finden konnte.
  • UNKNOWN_ERROR gibt an, dass eine Street View-Anfrage nicht verarbeitet werden konnte. Der genaue Grund ist jedoch nicht bekannt.

Mit dem folgenden Code wird ein StreetViewService erstellt, der als Reaktion auf Nutzerklicks auf einer Karte Markierungen erstellt, die beim Anklicken ein StreetViewPanorama dieses Standorts anzeigen. Der Code verwendet den Inhalt von StreetViewPanoramaData, der vom Dienst zurückgegeben wird.

TypeScript

/*
 * Click the map to set a new location for the Street View camera.
 */

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement
  );

  // Set up the map.
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }: google.maps.StreetViewResponse) {
  const location = data.location!;

  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano as string);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);

  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID as string);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

/*
 * Click the map to set a new location for the Street View camera.
 */
let map;
let panorama;

function initMap() {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano")
  );
  // Set up the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });
  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }) {
  const location = data.location;
  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);
  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%; float: left"></div>
    <div id="pano" style="width: 45%; height: 100%; float: left"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Benutzerdefinierte Street View-Panoramaansichten bereitstellen

Die Maps JavaScript API unterstützt die Anzeige von benutzerdefinierten Panoramen im StreetViewPanorama-Objekt. Mit benutzerdefinierten Panoramen können Sie das Innere von Gebäuden, Ausblicke von malerischen Orten oder alles, was Sie sich wünschen, zeigen. Sie können diese benutzerdefinierten Panoramen sogar mit vorhandenen Google Street View-Panoramen verknüpfen.

Die Einrichtung benutzerdefinierter Panoramabilder umfasst die folgenden Schritte:

  • Legen Sie ein Basispanoramabild für jedes benutzerdefinierte Panorama an. Dieses Basis-Image sollte die höchste Auflösung haben, mit der das Bild herangezoomt werden soll.
  • (Optional, aber empfohlen) Erstellen Sie eine Reihe von Panoramakacheln für verschiedene Zoomstufen des Basisbilds.
  • Erstellen Sie Verknüpfungen zwischen Ihren benutzerdefinierten Panoramabildern.
  • Optional: Geben Sie Panoramen im vorhandenen Street View-Bild von Google an und passen Sie die Links vom benutzerdefinierten Satz zum Standardsatz an bzw. von diesem an.
  • Definieren Sie Metadaten für jedes Panoramabild innerhalb eines StreetViewPanoramaData-Objekts.
  • Implementiere eine Methode, mit der die Daten und Bilder des benutzerdefinierten Panoramas ermittelt und diese Methode als dein benutzerdefinierter Handler im StreetViewPanorama-Objekt festgelegt werden.

Dieser Prozess ist in den nachfolgenden Abschnitten erläutert.

Benutzerdefinierte Panoramaansichten erstellen

Jedes Street View-Panorama besteht aus einem oder mehreren Bildern, die eine 360-Grad-Ansicht eines einzelnen Orts bilden. Das Objekt StreetViewPanorama verwendet Bilder, die der Rektangularprojektion (Plattkarte) entsprechen. Eine solche Projektion enthält eine 360-Grad-Horizontalsicht (eine volle Drehung) und eine 180-Grad-Vertikalsicht (von ganz oben nach unten). Diese Sichtfelder ergeben ein Bild mit einem Seitenverhältnis von 2:1. Unten sehen Sie ein vollständiges Rundum-Panorama.

Panoramabilder werden im Allgemeinen durch mehrere Fotos von einer Position aufgenommen, die dann mit einer Panoramasoftware zusammengefügt werden. Weitere Informationen finden Sie im Wikipedia-Artikel Vergleich von Fotostitching-Anwendungen. Diese Bilder sollten eine gemeinsame Kamera teilen, von der jedes Panoramabild aufgenommen wird. Das daraus resultierende 360°-Panorama kann dann eine Projektion auf einer Kugel definieren, wobei das Bild auf die zweidimensionale Oberfläche der Kugel gelegt ist.

Die Behandlung einer Projektion auf einer Kugel mit einem geradlinigen Koordinatensystem ist von Vorteil, wenn das Bild in geradlinige Kacheln unterteilt wird und Bilder auf Grundlage von berechneten Kachelkoordinaten bereitgestellt werden sollen.

Benutzerdefinierte Panoramakacheln erstellen

Street View unterstützt auch verschiedene Ebenen von Bilddetails mithilfe eines Zoomsteuerelements, mit dem Sie in der Standardansicht heran- und herauszoomen können. Im Allgemeinen bietet Street View fünf Zoomstufen für beliebige Panoramabilder. Wenn nur ein einzelnes Panoramabild für alle Zoomstufen bereitgestellt werden müsste, wäre ein solches Bild entweder sehr groß und würde die Anwendung erheblich verlangsamen oder eine so schlechte Auflösung bei höheren Zoomstufen haben, dass ein schlechtes, verpixeltes Bild entsteht. Glücklicherweise kann ein ähnliches Designmuster wie das zur Bereitstellung der Kartenkacheln von Google bei verschiedenen Zoomstufen verwendete Designmuster verwendet werden, damit die Panoramabilder in entsprechender Auflösung für jede Zoomstufe bereitgestellt werden können.

Beim ersten Laden eines StreetViewPanorama-Elements wird standardmäßig ein Bild mit 25% (90 Grad Bogenmaß) der horizontalen Breite des Panoramas auf Zoomstufe 1 angezeigt. Diese Ansicht entspricht ungefähr dem normalen menschlichen Sichtfeld. Durch Herauszoomen aus dieser Standardansicht wird im Wesentlichen ein breiterer Bogen dargestellt, während durch das Heranzoomen das Sichtfeld auf einen kleineren Bogen verengt wird. StreetViewPanorama berechnet automatisch das entsprechende Sichtfeld für die ausgewählte Zoomstufe und wählt dann Bilder aus, die für diese Auflösung am besten geeignet sind. Dazu wird ein Kachelsatz ausgewählt, der ungefähr den Abmessungen des horizontalen Sichtfelds entspricht. Die folgenden Sichtfelder sind Street View-Zoomstufen zugeordnet:

Street View-Vergrößerungsstufe Sichtfeld (Grad)
0 180
1 (Standard) 90
2 45
3 22,5
4 11,25

Die Größe des in Street View angezeigten Bilds hängt vollständig von der Bildschirmgröße (Breite) des Street View-Containers ab. Wenn Sie einen breiteren Container angeben, wird trotzdem das gleiche Sichtfeld für jede Zoomstufe bereitgestellt, auch wenn möglicherweise Kacheln ausgewählt werden, die für diese Auflösung besser geeignet sind.

Da jedes Panorama aus einer Rektangularprojektion besteht, ist es relativ einfach, Panoramakacheln zu erstellen. Da bei der Projektion ein Bild mit einem Seitenverhältnis von 2:1 bereitgestellt wird, sind Kacheln mit einem Seitenverhältnis von 2:1 einfacher zu verwenden, auch wenn quadratische Kacheln eine bessere Leistung auf quadratischen Karten erzielen (da das Sichtfeld quadratisch ist).

Bei 2:1-Kacheln stellt ein einzelnes Bild, das das gesamte Panorama umfasst, das gesamte Panorama (das Basisbild) auf Zoomstufe 0 dar, wobei jede zunehmende Zoomstufe 4zoomLevel-Kacheln bietet. (Bei Zoomstufe 2 besteht das gesamte Panorama beispielsweise aus 16 Kacheln.) Hinweis: Die Zoomstufen in den Street View-Kacheln stimmen nicht direkt mit den vom Street View-Steuerelement bereitgestellten Zoomstufen überein. Stattdessen wählen die Zoomstufen des Street View-Steuerelements ein Sichtfeld aus, aus dem die entsprechenden Kacheln ausgewählt werden.

Im Allgemeinen sollten Sie Ihre Bildkacheln benennen, damit sie programmatisch ausgewählt werden können. Ein solches Namensschema wird unten unter Benutzerdefinierte Panoramaanfragen verarbeiten beschrieben.

Benutzerdefinierte Panoramaanforderungen benennen

Wenn Sie ein benutzerdefiniertes Panorama verwenden möchten, rufen Sie StreetViewPanorama.registerPanoProvider() auf und geben Sie den Namen der Methode Ihres benutzerdefinierten Panoramaanbieters an. Die Methode des Panoramaanbieters muss ein StreetViewPanoramaData-Objekt zurückgeben und hat die folgende Signatur:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData ist ein Objekt in der folgenden Form:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

So zeigen Sie ein benutzerdefiniertes Panorama an:

  • Lege für das Attribut StreetViewPanoramaOptions.pano einen benutzerdefinierten Wert fest.
  • Rufen Sie StreetViewPanorama.registerPanoProvider() auf, um eine benutzerdefinierte Funktion des Panoramaanbieters bereitzustellen.
  • Implementieren Sie die Funktion Ihres benutzerdefinierten Panoramaanbieters, um den angegebenen pano-Wert zu verarbeiten.
  • Erstellen Sie ein StreetViewPanoramaData-Objekt.
  • Setze die Property StreetViewTileData.getTileUrl auf den Namen einer von dir bereitgestellten Funktion für einen benutzerdefinierten Tile-Anbieter. Beispiel: getCustomPanoramaTileUrl.
  • Implementieren Sie die Funktion des Anbieters benutzerdefinierter Kacheln wie in den folgenden Beispielen gezeigt.
  • Gibt das Objekt StreetViewPanoramaData zurück.

Hinweis:Lege position nicht direkt für StreetViewPanorama fest, wenn du benutzerdefinierte Panoramen anzeigen möchtest, da dies den Street View-Dienst anweist, die standardmäßigen Street View-Bilder in der Nähe dieses Standorts anzufordern. Legen Sie diese Position stattdessen im benutzerdefinierten StreetViewPanoramaData-Feld location.latLng fest.

Das folgende Beispiel zeigt ein benutzerdefiniertes Panorama des Google-Büros in Sydney. In diesem Beispiel werden keine Karten oder Standardbilder von Street View verwendet:

TypeScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(
  pano: string,
  zoom: number,
  tileX: number,
  tileY: number
): string {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;

JavaScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano) {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren

Der Anbieter des benutzerdefinierten Panoramas gibt die entsprechende Kachel mit der übergebenen Panorama-ID, der Zoomstufe und den Koordinaten der Panoramakachel zurück. Da die Bildauswahl auf diesen übergebenen Werten beruht, empfiehlt es sich, Bilder zu benennen, die programmatisch ausgewählt werden können und denen Werte übergeben werden, z. B. pano_zoom_tileX_tileY.png.

Im folgenden Beispiel wird dem Bild zusätzlich zu den Standardnavigationspfeilen von Street View ein weiterer Pfeil hinzugefügt, der auf Google Sydney verweist und auf die benutzerdefinierten Bilder verweist:

TypeScript

let panorama: google.maps.StreetViewPanorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle: google.maps.StreetViewPanoramaData;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData {
  return {
    location: {
      pano: "reception", // The ID for this custom panorama.
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (
        pano: string,
        zoom: number,
        tileX: number,
        tileY: number
      ): string {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view") as HTMLElement,
    { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider(
    (pano: string): google.maps.StreetViewPanoramaData => {
      if (pano === "reception") {
        return getReceptionPanoramaData();
      }
      // @ts-ignore TODO fix typings
      return null;
    }
  );

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (
      panorama.getPano() ===
      (outsideGoogle.location as google.maps.StreetViewLocation).pano
    ) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

function initMap(): void {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  new google.maps.StreetViewService()
    .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
    .then(({ data }: google.maps.StreetViewResponse) => {
      outsideGoogle = data;
      initPanorama();
    });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let panorama;
// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: "reception",
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: outsideGoogle.location.pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (pano, zoom, tileX, tileY) {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    { pano: outsideGoogle.location.pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider((pano) => {
    if (pano === "reception") {
      return getReceptionPanoramaData();
    }
    // @ts-ignore TODO fix typings
    return null;
  });
  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

function initMap() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  new google.maps.StreetViewService()
    .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
    .then(({ data }) => {
      outsideGoogle = data;
      initPanorama();
    });
}

window.initMap = initMap;

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#street-view {
  height: 100%;
}

HTML

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="street-view"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Beispiel ansehen

Beispiel ausprobieren