Servizio Street View

Panoramica

Seleziona la piattaforma: Android iOS JavaScript

Google Street View fornisce viste panoramiche a 360 gradi da strade designate in tutta la sua 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.

Di seguito è riportato un esempio di immagine di Street View.


L'API Maps JavaScript fornisce un servizio Street View per ottenere e manipolare le immagini utilizzate in Google Maps Street View. 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, è più utile quando 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 di Street View impostando la proprietà streetViewControlOptions.position di Map su un nuovo ControlPosition.

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

Quando l'utente rilascia l'indicatore Pegman su una strada, la mappa si aggiorna per visualizzare una Panoramica in Street View della località indicata.

Panoramiche in Street View

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

Puoi anche creare il tuo oggetto StreetViewPanorama e impostare la mappa in modo che utilizzi questo oggetto anziché quello predefinito, impostando esplicitamente la proprietà streetView della mappa su questo oggetto costruito. Puoi eseguire l'override della panoramica predefinita se vuoi modificare il comportamento predefinito, ad esempio la condivisione automatica degli overlay tra la mappa e la panoramica. (Consulta la sezione Overlay in Street View di seguito).

Contenitori di Street View

In alternativa, potresti voler visualizzare un StreetViewPanorama all'interno di un elemento DOM separato, spesso un elemento <div>. Basta 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à di Street View è progettata per essere utilizzata insieme a una mappa, questo utilizzo non è obbligatorio. Puoi utilizzare un oggetto Street View autonomo senza una mappa.

Posizioni e punto di vista (POV) di Street View

Il costruttore StreetViewPanorama 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 POV.

La posizione di Street View definisce il posizionamento della messa a fuoco della fotocamera per un'immagine, ma non l'orientamento della fotocamera 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 fotocamera in gradi rispetto al nord geografico. Le direzioni vengono misurate in senso orario (90 gradi corrispondono al vero est).
  • pitch (valore predefinito 0) definisce la variazione dell'angolo "verso l'alto" o "verso il basso" rispetto al beccheggio predefinito iniziale della videocamera, che spesso (ma non sempre) è piatto in orizzontale. Ad esempio, un'immagine scattata su una collina probabilmente mostrerà un'inclinazione predefinita non orizzontale. Gli angoli di inclinazione sono misurati con valori positivi verso l'alto (fino a +90 gradi verso l'alto e ortogonali all'inclinazione predefinita) e valori negativi verso il basso (fino a -90 gradi verso il basso e ortogonali all'inclinazione predefinita).

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

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

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center as google.maps.LatLng;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano')!, {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

JavaScript

async function init() {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano'), {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

CSS

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

body {
    display: flex;
}

gmp-map,
#pano {
    flex: 1;
    height: 100%;
}

HTML

<html>
    <head>
        <title>Street View split-map-panes</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.ts"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="42.345573,-71.098326"
            zoom="14"
            map-id="DEMO_MAP_ID"></gmp-map>
        <div id="pano"></div>
    </body>
</html>
Visualizza esempio

Prova l'esempio

Rilevamento 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 rilevamento del movimento o rilevamento della rotazione del dispositivo.

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

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

    L'esempio seguente disattiva sia il rilevamento del movimento sia il controllo del rilevamento del movimento. In questo caso, l'utente non può attivare il rilevamento 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 in basso a destra nella panoramica (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 rilevamento 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. In genere, gli overlay vengono visualizzati a "livello stradale" ancorati alle posizioni LatLng. Ad esempio, i marker verranno visualizzati con le code ancorate al piano orizzontale della località all'interno della panoramica in Street View.

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

Inoltre, quando crei una mappa con un StreetViewPanorama predefinito, tutti gli indicatori creati su una mappa vengono condivisi automaticamente con la Panoramica in Street View associata alla mappa, a condizione che la panoramica sia visibile. Per recuperare la Panoramica in 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, eseguirai l'override della panoramica predefinita.

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

TypeScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

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

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        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('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

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

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

    new 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({
        heading: 265,
        pitch: 0,
    });
}

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

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

void init();

JavaScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

let panorama;
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        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('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

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

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

    new 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({
        heading: 265,
        pitch: 0,
    });
}

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

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

void init();
export {};

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

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>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map 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>
Visualizza esempio

Prova l'esempio

Eventi di Street View

Quando navighi tra le immagini di 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 della panoramica (come i link) siano cambiati nel momento in cui viene attivato; indica solo che un ID panoramica è cambiato. Tieni presente che l'ID panorama (che puoi utilizzare per fare riferimento a questo panorama) è stabile solo all'interno della sessione del browser corrente.
  • position_changed viene attivato ogni volta che cambia la posizione sottostante (LatLng) della panoramica. La rotazione di un panorama non attiva questo evento. Tieni presente che puoi modificare la posizione sottostante di una panoramica senza modificare l'ID panorama associato, poiché l'API assocerà automaticamente l'ID panorama più vicino alla posizione della panoramica.
  • pov_changed viene attivato ogni volta che cambia il valore StreetViewPov di Street View. Tieni presente che questo evento potrebbe essere attivato mentre la posizione e l'ID panorama rimangono invariati.
  • links_changed viene attivato ogni volta che i link di Street View cambiano. 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 la visibilità di Street View cambia. Tieni presente che questo evento potrebbe essere attivato in modo asincrono dopo una modifica dell'ID panorama indicata tramite pano_changed.

Il seguente codice illustra come gestire questi eventi per raccogliere dati sull'elemento 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;

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;

CSS

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

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

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

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

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

HTML

<html>
  <head>
    <title>Street View Events</title>

    <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>
Visualizza esempio

Controlli di Street View

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

  • Un panControl consente di ruotare la panoramica. Questo controllo viene visualizzato per impostazione predefinita come controllo integrato standard per la bussola e la panoramica. Puoi modificare la posizione del controllo fornendo PanControlOptions all'interno del campo panControlOptions.
  • Un zoomControl consente di aumentare lo zoom all'interno dell'immagine. Questo controllo viene visualizzato per impostazione predefinita nell'angolo in basso a destra della panoramica. Puoi modificare l'aspetto del controllo fornendo ZoomControlOptions nel 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 nel campo addressControlOptions.
  • Un fullscreenControl offre l'opzione per aprire Street View in modalità a schermo intero. Puoi modificare l'aspetto del controllo fornendo FullscreenControlOptions nel campo fullscreenControlOptions.
  • Un motionTrackingControl offre la possibilità di attivare o disattivare il rilevamento 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 nella panoramica. Puoi modificare la posizione del controllo fornendo MotionTrackingControlOptions. Per saperne di più, consulta la sezione sul rilevamento del movimento.
  • Un linksControl fornisce frecce guida sull'immagine per spostarsi alle immagini panoramiche adiacenti.
  • Un controllo Chiudi consente all'utente di chiudere il visualizzatore di Street View. Puoi attivare o disattivare il controllo di chiusura impostando enableCloseButton su true o false.

L'esempio seguente modifica i controlli visualizzati all'interno di Street View associato 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;

JavaScript

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

window.initPano = initPano;

CSS

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

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

HTML

<html>
  <head>
    <title>Street View Controls</title>

    <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>
Visualizza esempio

Accesso diretto ai dati di Street View

Potresti voler determinare in modo programmatico la disponibilità dei dati di Street View o restituire informazioni su particolari panoramiche, 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 servizio di 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 passare un metodo di 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 i dati della panoramica in base a un ID di riferimento che identifica in modo univoco la panoramica. Tieni presente che questi ID di riferimento sono stabili solo per la durata delle immagini di quel panorama.

Una richiesta che utilizza StreetViewLocationRequest cerca i dati della panoramica in una località specificata, utilizzando i seguenti parametri:

  • location specifica la località (latitudine e longitudine) in cui cercare un panorama.
  • preference imposta una preferenza per l'immagine panoramica da trovare all'interno del raggio: quella più vicina alla località fornita o la migliore all'interno del raggio.
  • radius imposta un raggio, specificato in metri, in cui cercare una panoramica, centrata sulla latitudine e sulla longitudine specificate. Se non viene fornito, il valore predefinito è 50.
  • source specifica l'origine delle panoramiche 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 potrebbero non esistere panoramiche esterne per la località specificata.

Risposte del servizio Street View

La funzione getPanorama() richiede una funzione di callback da eseguire al momento del 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 relativi a una panoramica in 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 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 potrebbe restituire uno dei seguenti valori:

  • OK indica che il servizio ha trovato una panoramica corrispondente.
  • ZERO_RESULTS indica che il servizio non è riuscito a trovare una panoramica corrispondente ai criteri passati.
  • UNKNOWN_ERROR indica che non è stato possibile elaborare una richiesta di Street View, anche se il motivo esatto è sconosciuto.

Il codice seguente crea un StreetViewService che risponde ai clic degli utenti su una mappa creando indicatori che, se selezionati, mostrano un StreetViewPanorama di quella 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;

JavaScript

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

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

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

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

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

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

window.initMap = initMap;

CSS

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

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

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

    <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>
Visualizza esempio

Fornire panoramiche in Street View personalizzate

L'API Maps JavaScript supporta la visualizzazione di panoramiche personalizzate all'interno dell'oggetto StreetViewPanorama. Utilizzando panorami personalizzati, puoi mostrare l'interno di edifici, viste da luoghi panoramici o qualsiasi cosa tu possa immaginare. Puoi anche collegare queste panoramiche personalizzate alle panoramiche 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 la risoluzione più alta con cui vuoi pubblicare immagini ingrandite.
  • (Facoltativo, ma consigliato) Crea un insieme di riquadri panoramici a diversi livelli di zoom dall'immagine di base.
  • Crea collegamenti tra le tue panoramiche personalizzate.
  • (Facoltativo) Designa le panoramiche di "ingresso" all'interno delle immagini di 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 panoramiche personalizzate e designa questo metodo come gestore personalizzato all'interno dell'oggetto StreetViewPanorama.

Questo processo è spiegato nelle sezioni seguenti.

Creazione di panorami personalizzati

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

Vista panoramica di una strada cittadina

Le immagini panoramiche vengono generalmente ottenute scattando più foto da una posizione e unendole utilizzando un software per panoramiche. Per saperne di più, consulta la pagina di Wikipedia Comparison of photo stitching applications. Queste immagini devono condividere un unico punto di "ripresa" da cui vengono scattate tutte le 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.

Sfera con una vista panoramica di una strada sulla sua superficie

Trattare la panoramica 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 di panoramica 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 fornisce cinque livelli di risoluzione dello zoom per qualsiasi immagine panoramica. Se dovessi fare affidamento su una singola immagine panoramica per tutti i livelli di zoom, questa immagine dovrebbe necessariamente essere piuttosto grande e rallentare notevolmente l'applicazione oppure avere una risoluzione così bassa ai livelli di zoom più elevati da mostrare un'immagine con una scarsa pixelizzazione. Fortunatamente, però, possiamo utilizzare un pattern di progettazione simile a quello utilizzato per pubblicare i riquadri delle mappe di Google a diversi livelli di zoom per fornire immagini con risoluzione appropriata per le panoramiche a ogni livello di zoom.

Quando un StreetViewPanorama viene caricato per la prima volta, per impostazione predefinita mostra un'immagine costituita dal 25% (90 gradi di arco) della larghezza orizzontale della panoramica al livello di zoom 1. Questa visualizzazione corrisponde approssimativamente a un normale campo visivo umano. Lo zoom indietro da questa visualizzazione predefinita fornisce essenzialmente un arco più ampio, mentre lo zoom avanti restringe il campo di una visualizzazione a un arco più piccolo. L'StreetViewPanorama calcola automaticamente il campo visivo appropriato per il livello di zoom selezionato, quindi seleziona le immagini più appropriate per quella risoluzione selezionando un set di riquadri che corrisponde 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 dello schermo (larghezza) del contenitore di Street View. Se fornisci un container più ampio, il servizio fornirà comunque lo stesso campo visivo per un determinato livello di zoom, anche se potrebbe selezionare riquadri più appropriati per quella risoluzione.

Poiché ogni panorama è costituito da una proiezione equirettangolare, la creazione di riquadri panoramici è relativamente semplice. Poiché la proiezione fornisce un'immagine con proporzioni 2:1, i riquadri con proporzioni 2:1 sono più facili da utilizzare, anche se i riquadri quadrati possono fornire 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'"universo" del panorama completo (l'immagine di base) al livello di zoom 0, con ogni livello di zoom crescente che offre 4zoomLevel riquadri. Ad esempio, al livello di zoom 2, l'intero panorama è composto da 16 riquadri. Nota: i livelli di zoom nella suddivisione in riquadri Street View non corrispondono direttamente ai livelli di zoom forniti utilizzando il controllo di Street View. Al contrario, i livelli di zoom del controllo di Street View selezionano un campo visivo (FoV), da cui vengono selezionati i riquadri Street View appropriati.

Vista panoramica di una strada cittadina divisa in riquadri

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 panoramiche personalizzate.

Gestione delle richieste di panoramiche personalizzate

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

Function(pano):StreetViewPanoramaData

Un StreetViewPanoramaData è un oggetto con il 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 di fornitore di panoramiche personalizzate.
  • Implementa la funzione del provider di panoramiche personalizzate per gestire il valore pano specificato.
  • Crea un oggetto StreetViewPanoramaData.
  • Imposta la proprietà StreetViewTileData.getTileUrl sul nome di una funzione del provider di riquadri personalizzati che fornisci. Ad esempio: getCustomPanoramaTileUrl.
  • Implementa la funzione del provider di riquadri personalizzati, come mostrato negli esempi riportati di seguito.
  • Restituisci l'oggetto StreetViewPanoramaData.

Nota: non impostare direttamente un valore position su StreetViewPanorama quando vuoi visualizzare panoramiche personalizzate, poiché questa posizione indicherà al servizio Street View di richiedere le immagini di Street View predefinite vicine a quella località. Imposta invece questa posizione nel campo location.latLng dell'oggetto StreetViewPanoramaData personalizzato.

L'esempio seguente mostra una panoramica personalizzata dell'ufficio 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;

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;

CSS

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

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

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>

    <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>
Visualizza esempio

Il provider di panoramiche personalizzate restituisce il riquadro appropriato in base all'ID panoramica, al livello di zoom e alle coordinate dei riquadri della panoramica passati. Poiché la selezione delle immagini dipende da questi valori passati, è utile assegnare alle immagini nomi che possono essere selezionati in modo programmatico in base ai valori passati, ad esempio pano_zoom_tileX_tileY.png.

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

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;

CSS

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

#street-view {
  height: 100%;
}

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>
Visualizza esempio