Servizio Street View

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Panoramica

Seleziona piattaforma: Android iOS JavaScript

Google Street View offre viste panoramiche a 360 gradi dalle strade indicate nella sua copertura. La copertura API di Street View è la stessa di quella dell'applicazione Google Maps (https://maps.google.com/). L'elenco delle città attualmente supportate per Street View è disponibile sul sito web di Google Maps.

Di seguito è riportata un'immagine di Street View di esempio.


L'API Maps JavaScript fornisce un servizio Street View per ottenere e gestire le immagini utilizzate in Street View di Google Maps. Questo servizio di Street View è supportato in modo nativo nel browser.

Utilizzo della mappa di Street View

Sebbene Street View possa essere utilizzato all'interno di un elemento DOM autonomo, è comunque utile per indicare una località sulla mappa. Per impostazione predefinita, Street View è abilitato su una mappa e un controllo Peggman di Street View viene integrato nei controlli di navigazione (zoom e panoramica). Puoi nascondere questo controllo all'interno di MapOptions della mappa impostando streetViewControl su false. Puoi anche modificare la posizione predefinita del controllo di Street View impostando la proprietà streetViewControlOptions.position di Map su un nuovo ControlPosition.

Il controllo Street View Pegman ti consente di visualizzare le immagini di Street View direttamente all'interno della mappa. Quando l'utente fa clic e tiene premuto il pulsante Pegman, la mappa viene aggiornata per mostrare i contorni blu intorno alle strade abilitate per Street View, offrendo un'esperienza utente simile all'app Google Maps.

Quando l'utente rilascia l'indicatore di Pegman su una strada, la mappa viene aggiornata per visualizzare un panorama di Street View della posizione indicata.

Panoramiche in Street View

Le immagini di Street View sono supportate tramite l'utilizzo dell'oggetto StreetViewPanorama, che fornisce un'interfaccia API per un "visualizzatore" di Street View. Ogni mappa contiene una panoramica di Street View predefinita, che puoi recuperare chiamando il metodo getStreetView() della mappa. Quando aggiungi un controllo di Street View alla mappa impostando la propria opzione streetViewControl su true, connetti automaticamente il controllo Hadoop a questo panorama predefinito di Street View.

Puoi anche creare un oggetto StreetViewPanorama personalizzato e impostare la mappa per utilizzarlo al posto di quello predefinito, impostando esplicitamente la proprietà streetView della mappa su quell'oggetto creato. Ti consigliamo di eseguire l'override del panorama predefinito se vuoi modificare il comportamento predefinito, ad esempio la condivisione automatica degli overlay tra la mappa e il panorama. (consulta la sezione Sovrapposizioni in Street View di seguito).

Container Street View

In questo caso, potresti invece mostrare StreetViewPanorama in un elemento DOM separato, spesso un elemento <div>. Devi semplicemente passare l'elemento DOM all'interno del costruttore di StreetViewPanorama. Per una visualizzazione ottimale delle immagini, consigliamo una dimensione minima di 200 pixel per 200 pixel.

Nota: sebbene la funzionalità di Street View sia progettata per essere utilizzata insieme a una mappa, questo utilizzo non è obbligatorio. Puoi utilizzare un oggetto Street View autonomo senza mappa.

Posizioni e punto di vista (POV) di Street View

Il costruttore StreetViewPanorama consente inoltre di impostare la posizione e il punto di vista Street View utilizzando il parametro StreetViewOptions. Puoi chiamare setPosition() e setPov() sull'oggetto dopo la costruzione per modificarne la posizione e l'ordine di acquisto.

La posizione Street View definisce la posizione della messa a fuoco della fotocamera per un'immagine, ma non definisce l'orientamento della fotocamera per tale immagine. A tale scopo, l'oggetto StreetViewPov definisce due proprietà:

  • heading (valore predefinito: 0) definisce l'angolo di rotazione attorno al locus della fotocamera in gradi rispetto al vero nord. Le intestazioni vengono misurate in senso orario (90 gradi corrisponde a est).
  • pitch (valore predefinito: 0) definisce la varianza angolare "su" o "giù" rispetto al tono predefinito iniziale della videocamera, che spesso è (ma non sempre) orizzontale. Ad esempio, un'immagine scattata in collina potrebbe mostrare un tono predefinito non orizzontale. Gli angoli di inclinazione sono misurati con valori positivi rivolti verso l'alto (fino a +90 gradi verso l'alto e ortogonali alla tonalità predefinita) e valori negativi verso il basso (fino a -90 gradi verso il basso e ortogonali alla tonalità predefinita).

L'oggetto StreetViewPov viene utilizzato più spesso per determinare il punto di vista della fotocamera Street View. Puoi anche determinare il punto di vista del fotografo (in genere la direzione in cui si trovava l'auto o il trike) con il metodo StreetViewPanorama.getPhotographerPov().

Il seguente codice mostra una mappa di Boston con una vista iniziale di Fenway Park. Seleziona il Pegman e trascinalo in una posizione supportata sulla mappa per modificare il panorama di Street View:

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;
index.ts

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;
index.js

CSS

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

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Monitoraggio dei movimenti sui dispositivi mobili

Sui dispositivi che supportano gli eventi di orientamento, l'API offre agli utenti la possibilità di cambiare il punto di vista Street View in base al movimento del dispositivo. Gli utenti possono guardarsi intorno spostando i dispositivi. Questa operazione è chiamata monitoraggio del movimento o rotazione del dispositivo.

In qualità di sviluppatore di app, puoi modificare il comportamento predefinito come segue:

  • Attivare o disattivare la funzionalità di rilevamento dei movimenti. Per impostazione predefinita, il rilevamento dei movimenti è abilitato su qualsiasi dispositivo che lo supporta. L'esempio seguente disabilita il monitoraggio del movimento, ma lascia visibile il controllo del movimento. Tieni presente che l'utente può attivare il rilevamento dei movimenti toccando il controllo. 
    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false
    });

  • Nascondi o mostra il controllo del monitoraggio del movimento. Per impostazione predefinita, il controllo viene visualizzato sui dispositivi che supportano il monitoraggio del movimento. L'utente può toccare il controllo per attivare o disattivare il rilevamento dei movimenti. Tieni presente che il controllo non verrà mai visualizzato se il dispositivo non supporta il monitoraggio dei movimenti, indipendentemente dal valore di motionTrackingControl.

    L'esempio seguente disabilita sia il monitoraggio del movimento che il controllo del monitoraggio del movimento. In questo caso, l'utente non può attivare il monitoraggio del movimento:

    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
    });
  • Modifica la posizione predefinita del controllo di rilevamento del movimento. Per impostazione predefinita, il controllo viene visualizzato nella parte inferiore destra della panoramica (posizione RIGHT_BOTTOM). Il seguente esempio imposta la posizione del controllo su sinistra: 
    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
      }
    });

Per vedere il monitoraggio del movimento in azione, visualizza il seguente esempio su un dispositivo mobile (o su qualsiasi dispositivo che supporta gli eventi di orientamento del dispositivo):


Visualizza esempio

Overlay in Street View

L'oggetto StreetViewPanorama predefinito supporta la visualizzazione nativa di overlay nativi. Gli overlay vengono generalmente visualizzati a "livello stradale" ancorati in corrispondenza di LatLng posizioni. (Ad esempio, gli indicatori verranno visualizzati con le code ancorate al piano orizzontale della località all'interno del panorama di Street View).

Attualmente, i tipi di overlay che sono supportati sui panorami di Street View sono limitati a Marker, InfoWindow e OverlayView personalizzati. Gli overlay che visualizzi su una mappa possono essere visualizzati su una panoramica di Street View considerando il panorama come un sostitutivo per l'oggetto Map, chiamando setMap() e passando StreetViewPanorama come argomento anziché una mappa. Analogamente, puoi aprire le finestre informative all'interno di un panorama Street View chiamando open(), trasmettendo StreetViewPanorama() invece di una mappa.

Inoltre, quando crei una mappa con un valore predefinito per StreetViewPanorama, gli indicatori creati su una mappa vengono condivisi automaticamente con il panorama di Street View associato, a condizione che la panoramica sia visibile. Per recuperare il panorama Street View predefinito, chiama getStreetView() nell'oggetto Map. Tieni presente che se imposti esplicitamente la proprietà streetView della mappa su StreetViewPanorama della tua costruzione, sovrascriverai il panorama predefinito.

L'esempio seguente mostra degli indicatori che indicano varie località intorno ad Astor Place, New York. Attiva la visualizzazione su Street View per mostrare gli indicatori condivisi visualizzati all'interno di StreetViewPanorama.

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;
index.ts

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;
index.js

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Eventi Street View

Quando passi da Street View o ne modifichi l'orientamento, puoi monitorare diversi eventi che indicano modifiche allo stato di StreetViewPanorama:

  • pano_changed si attiva ogni volta che il singolo ID panorama cambia. Questo evento non garantisce che i dati associati all'interno del panorama (come i link) siano cambiati anche al momento dell'attivazione dell'evento; questo evento indica solo che un ID panorama è cambiato. Tieni presente che l'ID panorama (che puoi utilizzare per fare riferimento a questo panorama) è stabile solo all'interno della sessione corrente del browser.
  • position_changed si attiva ogni volta che la posizione sottostante (LatLng) del panorama cambia. La rotazione di una panoramica non attiva questo evento. Tieni presente che puoi modificare la posizione sottostante di un panorama senza modificare l'ID panoramica associato, poiché l'API assocerà automaticamente l'ID panorama più vicino alla posizione del panorama.
  • pov_changed si attiva ogni volta che StreetViewPov di Street View cambia. Tieni presente che questo evento potrebbe attivarsi mentre la posizione e l'ID panoramica rimangono stabili.
  • links_changed si attiva ogni volta che i link di Street View cambiano. Tieni presente che questo evento potrebbe attivarsi in modo asincrono dopo una modifica nell'ID panoramica indicato tramite pano_changed.
  • visible_changed si attiva ogni volta che la visibilità di Street View cambia. Tieni presente che questo evento potrebbe attivarsi in modo asincrono dopo una modifica nell'ID panoramica indicato tramite pano_changed.

Il seguente codice illustra la modalità di gestione di questi eventi per raccogliere i dati relativi ai StreetViewPanorama sottostanti:

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;
index.ts

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;
index.js

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Controlli Street View

Quando visualizzi un StreetViewPanorama, per impostazione predefinita vengono mostrati diversi controlli sul panorama. Puoi abilitare o disabilitare questi controlli impostando i campi appropriati in StreetViewPanoramaOptions su true o false:

  • panControl consente di ruotare il panorama. Per impostazione predefinita, questo controllo viene visualizzato sotto forma di controllo integrato standard di bussola e panoramica. Puoi modificare la posizione del controllo fornendo PanControlOptions nel campo panControlOptions.
  • zoomControl fornisce un modo per eseguire lo zoom all'interno dell'immagine. Per impostazione predefinita, questo controllo viene visualizzato nella parte inferiore destra della panoramica. Puoi modificare l'aspetto del controllo fornendo ZoomControlOptions nel campo zoomControlOptions.
  • Un addressControl fornisce un overlay testuale che indica l'indirizzo della località associata e offre un link per aprirlo in Google Maps. Puoi modificare l'aspetto del controllo fornendo StreetViewAddressControlOptions nel campo addressControlOptions.
  • fullscreenControl offre l'opzione per aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo fornendo FullscreenControlOptions nel campo fullscreenControlOptions.
  • motionTrackingControl offre l'opzione per attivare o disattivare il monitoraggio dei movimenti sui dispositivi mobili. Questo controllo viene visualizzato solo sui dispositivi che supportano gli eventi di orientamento del dispositivo. Per impostazione predefinita, il controllo viene visualizzato nella parte inferiore destra della panoramica. Puoi modificare la posizione del controllo fornendo MotionTrackingControlOptions. Per ulteriori informazioni, consulta la sezione sul monitoraggio del movimento.
  • Un'linksControl fornisce frecce guida sull'immagine per viaggiare verso le immagini panoramiche adiacenti.
  • Un controllo Chiudi consente all'utente di chiudere il visualizzatore Street View. Puoi abilitare o disabilitare il controllo Chiudi impostando enableCloseButton su true o false.

L'esempio seguente modifica i controlli visualizzati all'interno di Street View associato e rimuove i relativi link:

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;
index.ts

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;
index.js

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Accesso diretto ai dati di Street View

Potresti decidere in modo programmatico la disponibilità dei dati di Street View o restituire informazioni su particolari panoramiche, senza richiedere la manipolazione diretta di una mappa/panorama. A tale scopo, utilizza l'oggetto StreetViewService, che fornisce un'interfaccia per i dati archiviati nel servizio Street View di Google.

Richieste di servizi Street View

L'accesso al servizio Street View è asincrono, poiché l'API di Google Maps deve effettuare una chiamata a un server esterno. Per questo motivo, devi superare un metodo di callback da eseguire dopo il completamento della richiesta. Questo metodo di callback elabora il risultato.

Puoi avviare richieste a StreetViewService utilizzando StreetViewPanoRequest o StreetViewLocationRequest.

Una richiesta che utilizza StreetViewPanoRequest restituisce i dati di panorama con un ID di riferimento che identifica in modo univoco il panorama. Tieni presente che questi ID di riferimento sono stabili solo per la durata delle immagini della panoramica.

Una richiesta che utilizza StreetViewLocationRequest cerca i dati panoramici in una posizione specifica utilizzando i seguenti parametri:

  • location specifica la posizione (longitudine e longitudine) per cercare un panorama.
  • preference imposta una preferenza per la panoramica nel raggio: quella più vicina alla posizione fornita o la migliore all'interno del raggio.
  • radius imposta un raggio, specificato in metri, in cui cercare un panorama, centrato sulla latitudine e longitudine specificate. Se non viene fornito, il valore predefinito è 50.
  • source specifica la fonte dei panorami da cercare. I valori validi sono:
    • default utilizza le fonti predefinite per Street View; le ricerche non sono limitate a fonti specifiche.
    • outdoor limita le ricerche alle raccolte all'aperto. Tieni presente che potrebbero non esistere panorami esterni per la posizione specificata.

Risposte del servizio Street View

La funzione getPanorama() richiede una funzione di callback per l'esecuzione al recupero di un risultato dal servizio Street View. Questa funzione di callback restituisce un set di dati di panoramica all'interno di un oggetto StreetViewPanoramaData e un codice StreetViewStatus che indicano lo stato della richiesta, in questo ordine.

Una specifica degli oggetti StreetViewPanoramaData contiene metadati relativi a un panorama di Street View nel seguente formato:

{
  "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
  }
}

Tieni presente che questo oggetto dati non è un oggetto StreetViewPanorama. Per creare un oggetto di Street View utilizzando questi dati, devi creare un StreetViewPanorama e chiamare setPano(), trasmettendolo l'ID come indicato nel campo location.pano restituito.

Il codice status potrebbe restituire uno dei seguenti valori:

  • OK indica che il servizio ha trovato un panorama corrispondente.
  • ZERO_RESULTS indica che il servizio non ha trovato una panoramica corrispondente con i criteri superati.
  • UNKNOWN_ERROR indica che non è stato possibile elaborare una richiesta di Street View, anche se il motivo esatto è sconosciuto.

Il seguente codice crea un StreetViewService che risponde ai clic degli utenti su una mappa creando degli indicatori che, se selezionati, mostrano un StreetViewPanorama della località. Il codice utilizza i contenuti di StreetViewPanoramaData restituiti dal servizio.

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;
index.ts

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;
index.js

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Panoramiche in Street View personalizzate

L'API Maps JavaScript supporta la visualizzazione di panoramiche personalizzate all'interno dell'oggetto StreetViewPanorama. Usa i panorami personalizzati per mostrare gli interni di edifici, le viste di luoghi panoramici o qualsiasi cosa tu possa immaginare. Puoi anche collegare questi panorami personalizzati ai panorami di Street View esistenti di Google.

La configurazione di un insieme di immagini panoramiche personalizzate prevede i seguenti passaggi:

  • Crea un'immagine panoramica di base per ogni panorama personalizzato. Questa immagine di base deve avere l'immagine alla massima risoluzione da utilizzare per lo zoom nelle immagini.
  • (Facoltativo, ma consigliato) Crea un insieme di riquadri panoramici a diversi livelli di zoom rispetto all'immagine di base.
  • Crea collegamenti tra i panorami personalizzati.
  • (Facoltativo) Definisci le panoramiche "in entrata" nelle immagini di Street View esistenti di Google e personalizza i link da/verso l'insieme personalizzato all'insieme standard.
  • Definisci i metadati per ogni immagine panoramica all'interno di un oggetto StreetViewPanoramaData.
  • Implementa un metodo che determina i dati e le immagini panoramiche personalizzati e designa tale metodo come gestore personalizzato all'interno dell'oggetto StreetViewPanorama.

Questa procedura è spiegata nelle sezioni seguenti.

Creazione di panoramiche personalizzate

Ogni panorama di Street View è un'immagine o un insieme di immagini che offre una visualizzazione a 360 gradi da un'unica posizione. L'oggetto StreetViewPanorama utilizza immagini conformi alla proiezione equirettangolare (Plate Carrée). Questo tipo di proiezione contiene una panoramica orizzontale a 360° e una visuale verticale di 180° (da dritta verso l'alto verso il basso). Questi campi visivi generano un'immagine con proporzioni 2:1. Di seguito è riportato un panorama completo.

Vista panoramica di una strada cittadina

In genere, le immagini panoramiche vengono scattate scattando più foto da un'unica posizione e unendole mediante il software di panoramica. Per saperne di più, consulta la pagina Confronto delle applicazioni per l'unione di foto di Wikipedia. Queste immagini devono condividere un singolo "luogo" "fotocamera", da cui vengono tratte ciascuna delle immagini panoramiche. Il panorama a 360° risultante può quindi definire una proiezione su una sfera con l'immagine aggregata sulla superficie bidimensionale della sfera.

Sfera con una vista panoramica di una strada sulla sua superficie

Considerare il panorama come una proiezione su una sfera con un sistema di coordinate rettilineo è vantaggioso quando si divide l'immagine in piastrelle rettangolari e si gestiscono le immagini in base alle coordinate del riquadro calcolate.

Creazione di schede panoramiche personalizzate

Street View supporta inoltre diversi livelli di dettaglio delle immagini grazie all'uso di un controllo zoom, che consente di aumentare e diminuire lo zoom dalla visualizzazione predefinita. Generalmente, Street View offre cinque livelli di risoluzione dello zoom per ogni immagine panoramica. Se dovessi fare affidamento su una singola immagine panoramica per pubblicare tutti i livelli di zoom, un'immagine di questo tipo sarebbe necessariamente abbastanza grande e rallenterà notevolmente la tua applicazione oppure avrà una risoluzione così bassa a livelli di zoom più alti da pubblicare un'immagine sgranata. Fortunatamente, tuttavia, possiamo utilizzare un modello di progettazione simile utilizzato per pubblicare i riquadri di Google Maps a diversi livelli di zoom per fornire immagini di risoluzione appropriate per i panorami a ogni livello di zoom.

Quando viene caricato per la prima volta StreetViewPanorama, per impostazione predefinita viene visualizzata un'immagine composta dal 25% (90 gradi dell'arco) dell'ampiezza orizzontale del panorama al livello di zoom 1. Questa vista corrisponde all'incirca a un normale campo visivo umano. Diminuendo lo zoom rispetto a questa visualizzazione predefinita, puoi ottenere un arco più ampio, mentre lo zoom riduce il campo di una vista a un arco più piccolo. StreetViewPanorama calcola automaticamente il campo visivo appropriato per il livello di zoom selezionato, quindi seleziona le immagini più appropriate per la risoluzione selezionando un insieme di riquadri che corrisponda approssimativamente alle dimensioni del campo visivo orizzontale. I seguenti campi della mappa vengono mappati ai livelli di zoom di Street View:

Livello di zoom Street View Campo visivo (gradi)
0 180
1 (valore predefinito) 90
2 45
3 22,5
4 11,25

Tieni presente che le dimensioni dell'immagine mostrata in Street View dipendono interamente dalle dimensioni dello schermo (larghezza) del contenitore Street View. Se fornisci un container più ampio, il servizio fornirà comunque lo stesso campo visivo per qualsiasi livello di zoom, anche se potrebbe selezionare riquadri più appropriati per la risoluzione in questione.

Poiché ogni panorama è costituito da una proiezione equirettangolare, la creazione di riquadri panoramici è relativamente facile. Poiché la proiezione fornisce un'immagine con proporzioni 2:1, i riquadri con proporzioni 2:1 sono più facili da utilizzare, sebbene i riquadri quadrati possano offrire prestazioni migliori sulle mappe quadrate (poiché il campo visivo sarà quadrato).

Per i riquadri 2:1, una singola immagine che comprende l'intero panorama rappresenta l'intero panorama "world" (l'immagine di base) a livello di zoom 0, con ogni livello di zoom che offre 4 riquadri zoomLevel. Ad esempio, al livello di zoom 2, l'intero panorama è composto da 16 riquadri. Nota: i livelli di zoom nel riquadro di Street View non corrispondono direttamente ai livelli di zoom forniti utilizzando il controllo Street View; al contrario, i livelli di zoom del controllo Street View selezionano un Campo visivo, da cui vengono selezionati i riquadri appropriati.

Vista panoramica di una strada cittadina divisa in riquadri

In genere, decidi di assegnare un nome ai riquadri delle immagini in modo che possano essere selezionati in modo programmatico. Questo schema di denominazione è discusso di seguito nella sezione Gestire le richieste di panoramiche personalizzate.

Gestione delle richieste Panorama personalizzate

Per utilizzare un panorama personalizzato, chiama StreetViewPanorama.registerPanoProvider(), specificando il nome del metodo del tuo fornitore di panorama personalizzato. Il metodo del fornitore del panorama deve restituire un oggetto StreetViewPanoramaData e avere la seguente firma:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData è un oggetto nel seguente formato:

{
  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
  ]
}

Visualizza una panoramica personalizzata nel seguente modo:

  • Imposta la proprietà StreetViewPanoramaOptions.pano su un valore personalizzato.
  • Chiama StreetViewPanorama.registerPanoProvider() per fornire una funzione personalizzata di panoramica.
  • Implementa la funzione personalizzata del fornitore di servizi di panoramica per gestire il valore pano specificato.
  • Crea un oggetto StreetViewPanoramaData.
  • Imposta la proprietà StreetViewTileData.getTileUrl sul nome di una funzione del fornitore di riquadri personalizzata fornita da te. Ad esempio, getCustomPanoramaTileUrl.
  • Implementa la funzione del provider di riquadri personalizzati, come mostrato negli esempi riportati di seguito.
  • Restituire l'oggetto StreetViewPanoramaData.

Nota: non impostare direttamente un position su StreetViewPanorama quando vuoi visualizzare panorami personalizzati, in quanto questa posizione indicherà al servizio Street View di richiedere le immagini di Street View predefinite vicine a tale località. Imposta invece questa posizione nel campo location.latLng dell'oggetto StreetViewPanoramaData personalizzato.

L'esempio seguente mostra una panoramica personalizzata della sede di Google a Sydney. Tieni presente che questo esempio non utilizza una mappa o immagini di Street View predefinite:

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;
index.ts

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;
index.js

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

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima

Il fornitore di panoramiche personalizzate restituisce il riquadro appropriato in base all'ID panoramica passato, al livello di zoom e alle coordinate del riquadro panorama. Poiché la selezione delle immagini dipende da questi valori passati, è utile assegnare un nome alle immagini che possono essere selezionate in modo programmatico date quei valori passati, come pano_zoom_tileX_tileY.png.

L'esempio seguente aggiunge un'altra freccia all'immagine, oltre alle frecce di navigazione predefinite di Street View, che puntano a Google Sydney e rimanda alle immagini personalizzate:

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;
index.ts

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;
index.js

CSS

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

#street-view {
  height: 100%;
}

style.css

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.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Visualizza esempio

Prova anteprima