Servizio Street View

Panoramica

Seleziona la piattaforma: Android iOS JavaScript

Consulta anche il riferimento dell'API Maps JavaScript: Rendering, Servizio)

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

Nota:le immagini di Street View provengono da due fonti: Google (immagini non pubbliche controllate dagli sviluppatori) e il pubblico (UGC o contenuti pubblici generati dagli utenti). Tieni presente che non è possibile utilizzare una sola origine di immagini di Street View rispetto all'altra. Scopri di più sulle nostre norme sulla privacy relative alle immagini di Street View.

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

L'API Maps JavaScript fornisce un servizio Street View per ottenere e manipolare le immagini utilizzate in Google Maps Street View. Questo servizio Street View è supportato in modo nativo all'interno del browser.

Utilizzo della mappa di Street View

Sebbene Street View possa essere utilizzato all'interno di un elemento DOM autonomo, è più utile quando si indica una posizione su una mappa. Per impostazione predefinita, Street View è attivato su una mappa e un controllo Pegman di Street View viene visualizzato 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 Street View impostando la proprietà Map di streetViewControlOptions.position su un nuovo ControlPosition.

Il controllo Pegman di Street View ti consente di visualizzare i panorami di Street View direttamente all'interno della mappa. Quando l'utente fa clic e tiene premuto Pegman, la mappa si aggiorna per mostrare i contorni blu delle strade abilitate a Street View, offrendo un'esperienza utente simile a quella dell'app Google Maps.

Quando l'utente rilascia il segnaposto Pegman su una strada, la mappa si aggiorna per mostrare una panoramica di Street View della posizione indicata.

Panoramiche in Street View

Nota: vengono fatturate solo le panoramiche Street View generate con l'oggetto StreetViewPanorama. L'esperienza integrata Street View basata sul controllo Pegman in Street View e l'utilizzo di StreetViewService non vengono fatturati. Per ulteriori informazioni, vedi Prezzi.

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

Puoi anche creare il tuo oggetto StreetViewPanorama e impostare la mappa in modo che lo utilizzi al posto di quello predefinito impostando la proprietà streetView della mappa in modo esplicito su quell'oggetto costruito. Potresti voler ignorare il panorama predefinito se vuoi modificare il comportamento predefinito, ad esempio la condivisione automatica delle sovrapposizioni tra la mappa e il panorama. (vedi Overlay in Street View di seguito).

Contenitori Street View

In alternativa, potresti voler visualizzare un StreetViewPanorama all'interno di un elemento DOM separato, spesso un elemento <div>. È sufficiente passare l'elemento DOM all'interno del costruttore di StreetViewPanorama. Per una visualizzazione ottimale delle immagini, consigliamo una dimensione minima di 200 x 200 pixel.

Nota:anche se la funzionalità Street View è progettata per essere utilizzata in combinazione con una mappa, questo utilizzo non è obbligatorio. Puoi utilizzare un oggetto Street View autonomo senza una mappa.

Posizioni e punti di vista (POV) di Street View

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

La posizione di Street View definisce il posizionamento della messa a fuoco della videocamera per un'immagine, ma non definisce l'orientamento della videocamera per quell'immagine. A questo scopo, l'oggetto StreetViewPov definisce due proprietà:

• heading (valore predefinito 0) definisce l'angolo di rotazione attorno al locus della videocamera in gradi rispetto al nord geografico. Le direzioni sono misurate in senso orario (90 gradi è est).
• pitch (valore predefinito 0) definisce la varianza dell'angolo "up" o "down" rispetto all'inclinazione predefinita iniziale della videocamera, che spesso (ma non sempre) è orizzontale. (Ad esempio, un'immagine scattata su una collina probabilmente mostrerà un'inclinazione predefinita non orizzontale.) Gli angoli di beccheggio sono misurati con valori positivi che guardano verso l'alto (fino a +90 gradi in verticale e ortogonali al beccheggio predefinito) e valori negativi che guardano verso il basso (fino a -90 gradi in verticale e ortogonali al beccheggio predefinito).

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

Il seguente codice mostra una mappa di Boston con una visualizzazione iniziale del Fenway Park. Selezionando Pegman e trascinandolo in una posizione supportata sulla mappa, il panorama di Street View cambierà:

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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell

Monitoraggio del movimento sui dispositivi mobili

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

In qualità di sviluppatore di app, puoi modificare il comportamento predefinito nel seguente modo:

• Attiva o disattiva la funzionalità di monitoraggio del movimento. Per impostazione predefinita, il monitoraggio del movimento è attivato su tutti i dispositivi che lo supportano. Il seguente esempio disattiva il monitoraggio del movimento, ma lascia visibile il controllo del monitoraggio del movimento. Tieni presente che l'utente può attivare il monitoraggio del movimento 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 mostrato sui dispositivi che supportano il monitoraggio del movimento. L'utente può toccare il controllo per attivare o disattivare il monitoraggio del movimento. Tieni presente che il controllo non viene mai visualizzato se il dispositivo non supporta il monitoraggio del movimento, indipendentemente dal valore di motionTrackingControl.

  Il seguente esempio disattiva sia il monitoraggio del movimento sia 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 monitoraggio del movimento. Per impostazione predefinita, il controllo viene visualizzato in basso a destra nel panorama (posizione RIGHT_BOTTOM). L'esempio seguente imposta la posizione del controllo in basso a 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 supporti gli eventi di orientamento del dispositivo):

Visualizza esempio

Overlay in Street View

L'oggetto StreetViewPanorama predefinito supporta la visualizzazione nativa degli overlay della mappa. Le sovrapposizioni in genere vengono visualizzate a "livello stradale" ancorate a LatLng posizioni. I segnaposto vengono visualizzati con la coda ancorata al piano orizzontale della posizione all'interno della panoramica Street View, ad esempio.

Al momento, i tipi di overlay supportati nei panorami di Street View sono limitati a Marker, InfoWindow e OverlayView personalizzati. Gli overlay che visualizzi su una mappa possono essere visualizzati in un panorama di Street View trattando il panorama come sostituto dell'oggetto Map, chiamando setMap() e passando StreetViewPanorama come argomento anziché una mappa. Le finestre informative possono essere aperte in modo simile all'interno di un panorama di Street View chiamando open() e passando StreetViewPanorama() anziché una mappa.

Inoltre, quando crei una mappa con un StreetViewPanorama predefinito, tutti i segnaposto creati su una mappa vengono condivisi automaticamente con la panoramica Street View associata alla mappa, a condizione che la panoramica sia visibile. Per recuperare la panoramica Street View predefinita, chiama getStreetView() sull'oggetto Map. Tieni presente che se imposti esplicitamente la proprietà streetView della mappa su un StreetViewPanorama di tua creazione, sostituirai il panorama predefinito.

L'esempio seguente mostra i marcatori che indicano varie località intorno ad Astor Place, New York City. Attiva la visualizzazione in Street View per mostrare i marcatori condivisi all'interno di StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;
let innerMap: google.maps.Map;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    innerMap = mapElement.innerMap;

    document
        .getElementById('streetview-toggle-button')!
        .addEventListener('click', toggleStreetView);

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;

    // Set up the markers on the map
    const cafeMarker = new google.maps.Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });

    const bankMarker = new google.maps.Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });

    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        title: 'Bus Stop',
        icon: busIcon.src,
    });

    // We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.
    panorama = innerMap.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);
    }
}

initMap();
index.ts

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

JavaScript

let panorama;
let innerMap;
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };
    const mapElement = document.querySelector('gmp-map');
    innerMap = mapElement.innerMap;
    document
        .getElementById('streetview-toggle-button')
        .addEventListener('click', toggleStreetView);
    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;
    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;
    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;
    // Set up the markers on the map
    const cafeMarker = new google.maps.Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });
    const bankMarker = new google.maps.Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });
    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        title: 'Bus Stop',
        icon: busIcon.src,
    });
    // We get the map's default panorama and set up some defaults.
    // Note that we don't yet set it visible.
    panorama = innerMap.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);
    }
}
initMap();
export {};
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;
}

#streetview-toggle-button {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: none;
  background: white;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px 0px 10px -2px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgb(86, 86, 86);
}

#streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}
style.css

HTML

<html>
    <head>
        <title>Overlays Within Street View</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18">
            <input type="button" value="Toggle Street View" id="streetview-toggle-button" slot="control-block-start-inline-start" />
        </gmp-map>
    </body>
</html>
index.html

Visualizza esempio

Prova campione

JSFiddle.net

Eventi Street View

Quando navighi in Street View o ne manipoli l'orientamento, potresti voler monitorare diversi eventi che indicano modifiche allo stato di StreetViewPanorama:

• pano_changed viene attivato ogni volta che l'ID della singola panoramica cambia. Questo evento non garantisce che anche i dati associati all'interno del panorama (ad esempio i link) siano stati modificati al momento dell'attivazione di questo evento; questo evento indica solo che un ID panorama è stato modificato. Tieni presente che l'ID panorama (che puoi utilizzare come riferimento per questo panorama) è stabile solo all'interno della sessione del browser corrente.
• position_changed viene attivato ogni volta che la posizione (LatLng) sottostante del panorama cambia. La rotazione di una panoramica non attiverà questo evento. Tieni presente che puoi modificare la posizione sottostante di un panorama senza modificare l'ID pano associato, poiché l'API assocerà automaticamente l'ID pano più vicino alla posizione del panorama.
• pov_changed viene attivato ogni volta che cambia StreetViewPov di Street View. Tieni presente che questo evento può essere attivato mentre la posizione e l'ID panorama rimangono stabili.
• links_changed viene attivato ogni volta che cambiano i link di Street View. Tieni presente che questo evento potrebbe essere attivato in modo asincrono dopo una modifica dell'ID panorama indicata tramite pano_changed.
• visible_changed viene attivato ogni volta che cambia la visibilità di Street View. Tieni presente che questo evento potrebbe essere attivato in modo asincrono dopo una modifica dell'ID panorama indicata tramite pano_changed.

Il seguente codice mostra come possono essere gestiti questi eventi per raccogliere dati sul StreetViewPanorama sottostante:

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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell

Controlli di Street View

Quando viene visualizzato un StreetViewPanorama, per impostazione predefinita sul panorama vengono visualizzati vari controlli. Puoi attivare o disattivare questi controlli impostando i campi appropriati all'interno di StreetViewPanoramaOptions su true o false:

• Un panControl consente di ruotare il panorama. Questo controllo viene visualizzato per impostazione predefinita come bussola integrata standard e controllo di panoramica. Puoi modificare la posizione del controllo fornendo PanControlOptions all'interno del campo panControlOptions.
• Un zoomControl consente di ingrandire l'immagine. Questo controllo viene visualizzato per impostazione predefinita in basso a destra del panorama. Puoi modificare l'aspetto del controllo fornendo ZoomControlOptions all'interno del campo zoomControlOptions.
• Un addressControl fornisce un overlay di testo che indica l'indirizzo della località associata e offre un link per aprire la località in Google Maps. Puoi modificare l'aspetto del controllo fornendo StreetViewAddressControlOptions all'interno del campo addressControlOptions.
• Un fullscreenControl offre la possibilità di aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo fornendo FullscreenControlOptions all'interno del campo fullscreenControlOptions.
• Un motionTrackingControl offre la possibilità di attivare o disattivare il monitoraggio del movimento 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 in basso a destra del panorama. Puoi modificare la posizione del controllo fornendo MotionTrackingControlOptions. Per ulteriori informazioni, consulta la sezione relativa al monitoraggio del movimento.
• Una linksControl fornisce frecce guida sull'immagine per spostarsi verso immagini panoramiche adiacenti.
• Un controllo Chiudi consente all'utente di chiudere il visualizzatore Street View. Puoi attivare o disattivare il controllo Chiudi impostando enableCloseButton su true o false.

L'esempio seguente modifica i controlli visualizzati all'interno della visualizzazione Street View associata e rimuove i link della visualizzazione:

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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell

Accesso diretto ai dati di Street View

Potresti voler determinare in modo programmatico la disponibilità dei dati di Street View o restituire informazioni su panoramiche particolari, senza richiedere la manipolazione diretta di una mappa/panoramica. Puoi farlo utilizzando l'oggetto StreetViewService, che fornisce un'interfaccia ai dati archiviati nel servizio Street View di Google.

Richieste di servizi Street View

L'accesso al servizio Street View è asincrono, poiché l'API Google Maps deve effettuare una chiamata a un server esterno. Per questo motivo, devi passare un metodo callback da eseguire al 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 dati panoramici dato 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 del panorama.

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

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

Risposte del servizio Street View

La funzione getPanorama() richiede una funzione di callback da eseguire al recupero di un risultato dal servizio Street View. Questa funzione di callback restituisce un insieme di dati panoramici all'interno di un oggetto StreetViewPanoramaData e un codice StreetViewStatus che indica lo stato della richiesta, in quest'ordine.

Una specifica dell'oggetto StreetViewPanoramaData contiene metadati su 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 in sé. Per creare un oggetto Street View utilizzando questi dati, devi creare un StreetViewPanorama e chiamare setPano(), passando l'ID come indicato nel campo location.pano restituito.

Il codice status può restituire uno dei seguenti valori:

• OK indica che il servizio ha trovato un panorama corrispondente.
• ZERO_RESULTS indica che il servizio non è riuscito a trovare un panorama corrispondente con i criteri specificati.
• 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 indicatori che, se cliccati, mostrano un StreetViewPanorama di quella posizione. 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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell

Fornire panoramiche Street View personalizzate

L'API Maps JavaScript supporta la visualizzazione di panoramiche personalizzate all'interno dell'oggetto StreetViewPanorama. Utilizzando i panorami personalizzati, puoi mostrare l'interno degli edifici, le viste da luoghi panoramici o qualsiasi cosa ti venga in mente. Puoi persino collegare questi panorami personalizzati ai panorami 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 essere l'immagine con la risoluzione più alta con cui vuoi pubblicare le immagini ingrandite.
• (Facoltativo, ma consigliato) Crea un insieme di riquadri panoramici a diversi livelli di zoom dall'immagine di base.
• Crea link tra i tuoi panorami personalizzati.
• (Facoltativo) Designa i panorami "di ingresso" all'interno delle immagini Street View esistenti di Google e personalizza i link da/verso il set personalizzato al set standard.
• Definisci i metadati per ogni immagine panoramica all'interno di un oggetto StreetViewPanoramaData.
• Implementa un metodo che determina i dati e le immagini del panorama personalizzato e designa questo metodo come gestore personalizzato all'interno dell'oggetto StreetViewPanorama.

Le sezioni seguenti spiegano questa procedura.

Creare panorami personalizzati

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

Le immagini panoramiche vengono generalmente ottenute scattando più foto da una posizione e unendole utilizzando un software panoramico. Per saperne di più, consulta l'articolo Comparison of photo stitching applications di Wikipedia. Queste immagini devono condividere un unico locus "fotocamera" da cui vengono scattate ciascuna delle immagini panoramiche. La panoramica a 360 gradi risultante può quindi definire una proiezione su una sfera con l'immagine avvolta sulla superficie bidimensionale della sfera.

Trattare il panorama come una proiezione su una sfera con un sistema di coordinate rettilineo è vantaggioso quando si divide l'immagine in riquadri rettilinei e si pubblicano immagini in base alle coordinate dei riquadri calcolate.

Creazione di riquadri panoramici personalizzati

Street View supporta anche diversi livelli di dettaglio delle immagini tramite l'utilizzo di un controllo dello zoom, che consente di aumentare e diminuire lo zoom dalla visualizzazione predefinita. In genere, Street View offre cinque livelli di risoluzione dello zoom per qualsiasi immagine panoramica. Se dovessi affidarti a una singola immagine panoramica per tutti i livelli di zoom, un'immagine di questo tipo sarebbe necessariamente piuttosto grande e rallenterebbe notevolmente la tua applicazione oppure avrebbe una risoluzione così scarsa ai livelli di zoom più elevati da mostrare un'immagine con una scarsa pixelizzazione. Fortunatamente, possiamo utilizzare un pattern di progettazione simile utilizzato per pubblicare i riquadri della mappa di Google a diversi livelli di zoom per fornire immagini con una risoluzione appropriata per le panoramiche a ogni livello di zoom.

Quando un StreetViewPanorama viene caricato per la prima volta, per impostazione predefinita viene visualizzata un'immagine costituita dal 25% (90 gradi di arco) della larghezza orizzontale del panorama al livello di zoom 1. Questa visualizzazione corrisponde approssimativamente al normale campo visivo umano. Se "allontani" la visualizzazione predefinita, l'arco sarà più ampio, mentre se la avvicini, il campo visivo si restringe a un arco più piccolo. StreetViewPanorama calcola automaticamente il campo visivo appropriato per il livello di zoom selezionato, quindi seleziona le immagini più adatte a quella risoluzione scegliendo un set di riquadri che corrisponda approssimativamente alle dimensioni del campo visivo orizzontale. I seguenti campi visivi corrispondono ai livelli di zoom di Street View:

Livello di zoom di 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 (larghezza) del contenitore di Street View. Se fornisci un contenitore più ampio, il servizio fornirà comunque lo stesso campo visivo per qualsiasi livello di zoom, anche se potrebbe selezionare riquadri più appropriati per quella risoluzione.

Poiché ogni panorama è costituito da una proiezione equirettangolare, creare i riquadri del panorama è relativamente semplice. Poiché la proiezione fornisce un'immagine con proporzioni 2:1, le tessere con proporzioni 2:1 sono più facili da usare, anche se le tessere quadrate possono offrire un rendimento migliore sulle mappe quadrate (poiché il campo visivo sarà quadrato).

Per i riquadri 2:1, una singola immagine che comprende l'intera panoramica rappresenta l'intero "mondo" panoramico (l'immagine di base) al livello di zoom 0, mentre ogni livello di zoom crescente offre 4^zoomLevel Ad esempio, a livello di zoom 2, l'intera panoramica è costituita da 16 riquadri. Nota : i livelli di zoom nel tiling 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 (FOV), da cui vengono selezionati i riquadri appropriati.

In genere, è consigliabile assegnare un nome ai riquadri delle immagini in modo che possano essere selezionati in modo programmatico. Questo schema di denominazione è descritto di seguito nella sezione Gestione delle richieste di panorama personalizzate.

Gestione delle richieste di panorama personalizzato

Per utilizzare una panoramica personalizzata, chiama StreetViewPanorama.registerPanoProvider(), specificando il nome del metodo del tuo fornitore di panoramiche personalizzate. Il metodo del provider di panorama deve restituire un oggetto StreetViewPanoramaData e ha la seguente firma:

Function(pano):StreetViewPanoramaData

Un StreetViewPanoramaData è un oggetto del seguente modulo:

{
  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 un panorama personalizzato nel seguente modo:

• Imposta la proprietà StreetViewPanoramaOptions.pano su un valore personalizzato.
• Chiama StreetViewPanorama.registerPanoProvider() per fornire una funzione personalizzata del fornitore di panorama.
• Implementa la funzione del fornitore di panorama personalizzato per gestire il valore pano specificato.
• Costruisci un oggetto StreetViewPanoramaData.
• Imposta la proprietà StreetViewTileData.getTileUrl sul nome di una funzione del fornitore di tessere personalizzate che fornisci. Ad esempio, getCustomPanoramaTileUrl.
• Implementa la funzione del fornitore di tessere personalizzate, come mostrato negli esempi di seguito.
• Restituisci l'oggetto StreetViewPanoramaData.

Nota:non impostare direttamente un position su StreetViewPanorama quando vuoi visualizzare panoramiche personalizzate, in quanto una posizione di questo tipo indicherà al servizio Street View di richiedere le immagini di Street View predefinite vicine a quella posizione. Imposta invece questa posizione all'interno del campo location.latLng dell'oggetto personalizzato StreetViewPanoramaData.

L'esempio seguente mostra un panorama personalizzato dell'ufficio Google di 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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell

Il fornitore di panorami personalizzati restituisce il riquadro appropriato in base all'ID panorama, al livello di zoom e alle coordinate del riquadro del panorama passati. Poiché la selezione delle immagini dipende da questi valori passati, è utile denominare le immagini che possono essere selezionate in modo programmatico in base a questi valori passati, ad esempio pano_zoom_tileX_tileY.png.

L'esempio seguente aggiunge un'altra freccia all'immagine, oltre alle frecce di navigazione di Street View predefinite, che punta verso 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

Nota:leggi la guida sull'utilizzo di TypeScript e Google Maps.

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", // 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.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

Nota:il codice JavaScript viene compilato dallo snippet TypeScript.

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>

    <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 script 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 campione

JSFiddle.net Google Cloud Shell