Usługa Street View

Przegląd

Google Street View umożliwia panoramiczne widoki 360° z wyznaczonych dróg na całym obszarze objętym zasięgiem. Zakres interfejsu API Street View jest taki sam jak w przypadku aplikacji Mapy Google (https://maps.google.com/). Lista miast, w przypadku których funkcja Street View jest obecnie obsługiwana, jest dostępna na stronie Map Google.

Poniżej znajduje się przykładowe zdjęcie Street View.

Maps JavaScript API to usługa Street View, która umożliwia pozyskiwanie zdjęć używanych w Street View w Mapach Google i manipulowanie nimi. Ta usługa Street View jest obsługiwana natywnie w przeglądarce.

Wykorzystanie map Street View

Street View może być używane w ramach samodzielnego elementu DOM, ale jest najbardziej przydatny podczas wskazywania lokalizacji na mapie. Domyślnie Street View jest włączone na mapie, a element sterujący Pegmana w Street View jest zintegrowany z elementami sterującymi nawigacji (powiększaniem i przesuwaniem). Możesz ukryć ten element sterujący w MapOptions mapy, ustawiając streetViewControl na false. Możesz też zmienić domyślną pozycję elementu sterującego Street View, ustawiając nową wartość ControlPosition właściwości streetViewControlOptions.position obiektu Map.

Sterowanie Pegmanem w Street View umożliwia wyświetlanie panoram Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zaktualizuje się i pojawi się niebieskie kontury wokół ulic z obsługą Street View, co przypomina korzystanie z aplikacji Mapy Google.

Gdy użytkownik upuści znacznik Pegmana na ulicy, mapa zostanie zaktualizowana, aby wyświetlić panoramę wskazanego miejsca ze Street View.

Panoramy Street View

Zdjęcia Street View są obsługiwane przez obiekt StreetViewPanorama, który udostępnia interfejs API do „viewera” Street View. Każda mapa zawiera domyślną panoramę Street View, którą możesz pobrać, wywołując metodę getStreetView() mapy. Gdy dodasz element sterujący Street View do mapy, ustawiając opcję streetViewControl na true, automatycznie połączysz kontrolkę Pegmana z domyślną panoramą Street View.

Możesz też utworzyć własny obiekt StreetViewPanorama i ustawić mapę tak, aby używała go zamiast domyślnego, ustawiając jawnie właściwość streetView mapy na ten utworzony obiekt. panoramę domyślną możesz zastąpić, jeśli chcesz zmienić jej domyślne działanie, na przykład automatyczne udostępnianie nakładek między mapą a panoramą. (Patrz sekcja Nakładki w Street View poniżej).

Kontenery Street View

Możesz zamiast tego wyświetlać StreetViewPanorama w osobnym elemencie DOM, często z elementem <div>. Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama. Aby obrazy były dobrze wyświetlane, minimalny rozmiar to 200 x 200 pikseli.

Uwaga: chociaż funkcje Street View są przeznaczone do używania w połączeniu z mapą, nie jest to wymagane. Możesz użyć samodzielnego obiektu Street View bez mapy.

Lokalizacje i punkty widzenia w Street View

Konstruktor StreetViewPanorama umożliwia również ustawienie lokalizacji i punktu widzenia Street View za pomocą parametru StreetViewOptions. Po utworzeniu obiektu możesz wywołać setPosition() i setPov(), aby zmienić jego lokalizację i punkt widzenia.

Lokalizacja Street View określa, gdzie znajduje się ostrość aparatu, ale nie określa orientacji aparatu dla tego zdjęcia. W tym celu obiekt StreetViewPov definiuje 2 właściwości:

• heading (domyślnie 0) określa kąt obrotu wokół lokalizacji kamery w stopniach względem rzeczywistej północy. Nagłówki są mierzone w prawo (90 stopni to rzeczywisty wschód).
• pitch (domyślnie 0) określa wariancję kąta „w górę” lub „w dół” względem początkowego domyślnego nachylenia kamery, które często (ale nie zawsze) jest płaskie w poziomie. Na przykład zdjęcie zrobione ze wzgórza prawdopodobnie będzie miało domyślne ustawienie przechylenia, które nie jest poziome. Kąty kąta są mierzone przy użyciu wartości dodatnich (do +90 stopni prosto w górę i ortogonalnie do domyślnego kąta), a wartości ujemne – w dół (do -90 stopni prosto w dół i ortogonalnego do domyślnego).

Obiekt StreetViewPov jest najczęściej używany do określania punktu widzenia aparatu Street View. Za pomocą metody StreetViewPanorama.getPhotographerPov() możesz też określić punkt widzenia fotografa – zwykle kierunek, w którym był ustawiony samochód lub trójkołowiec.

Poniższy kod wyświetla mapę Bostonu z początkowym widokiem Fenway Park. Wybranie Pegmana i przeciągnięcie go do obsługiwanego miejsca na mapie spowoduje zmianę panoramy Street View:

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

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

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

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

<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

Śledzenie ruchu na urządzeniach mobilnych

Na urządzeniach, które obsługują zdarzenia orientacji urządzenia, interfejs API umożliwia użytkownikom zmianę punktu widzenia Street View w zależności od ruchu urządzenia. Użytkownicy mogą się rozglądać, poruszając urządzeniami. Jest to tzw. śledzenie ruchu lub śledzenie obrotu urządzenia.

Jako deweloper aplikacji możesz zmienić domyślne działanie w następujący sposób:

• Włącz lub wyłącz funkcję śledzenia ruchu. Śledzenie ruchu jest domyślnie włączone na każdym urządzeniu, które obsługuje tę funkcję. Poniższy przykład wyłącza śledzenie ruchu, ale jego element sterujący jest widoczny. (pamiętaj, że użytkownik może włączyć śledzenie ruchu, klikając element sterujący).

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false
      });
  

• Ukryj lub pokaż element sterujący śledzeniem ruchu. Domyślnie element sterujący jest wyświetlany na urządzeniach, które obsługują śledzenie ruchu. Użytkownik może dotknąć elementu sterującego, aby włączyć lub wyłączyć śledzenie ruchu. Pamiętaj, że element sterujący nie pojawi się, jeśli urządzenie nie obsługuje śledzenia ruchu, bez względu na wartość motionTrackingControl.

  Poniższy przykład pokazuje wyłączenie śledzenia ruchu i ich sterowania. W tym przypadku użytkownik nie może włączyć śledzenia ruchu:

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

• Zmień domyślną pozycję elementu sterującego śledzeniem ruchu. Domyślnie ten element sterujący jest widoczny w prawym dolnym rogu panoramy (położenie RIGHT_BOTTOM). W przykładzie poniżej znajduje się element sterujący, który znajduje się w lewym dolnym rogu:

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

Aby zobaczyć, jak działa śledzenie ruchu, wyświetl poniższy przykład na urządzeniu mobilnym (lub innym urządzeniu, które obsługuje zdarzenia orientacji urządzenia):

Zobacz przykład

Nakładki w Street View

Domyślny obiekt StreetViewPanorama obsługuje natywne wyświetlanie nakładek mapy. Nakładki zazwyczaj wyświetlają się na poziomie ulicy i zakotwiczone w położeniu LatLng. (na przykład na panoramie Street View znaczniki będą zakotwiczone na płaszczyźnie poziomej lokalizacji).

Obecnie typy nakładek obsługiwanych w panoramach Street View są ograniczone do Marker, InfoWindow i niestandardowych OverlayView. Nakładki wyświetlane na mapie mogą być wyświetlane na panoramie Street View, traktując panoramę jako zamiennik obiektu Map, wywołując setMap() i przekazując StreetViewPanorama jako argument zamiast mapy. W podobny sposób można otwierać okna informacyjne na panoramie Street View, wywołując funkcję open() i przekazując StreetViewPanorama() zamiast mapy.

Dodatkowo podczas tworzenia mapy z domyślnym ustawieniem StreetViewPanorama wszystkie znaczniki utworzone na mapie są automatycznie udostępniane powiązanej z nią panoramie Street View, o ile dana panorama jest widoczna. Aby pobrać domyślną panoramę Street View, wywołaj getStreetView() w obiekcie Map. Pamiętaj, że jeśli we właściwości streetView mapy ustawisz właściwość StreetViewPanorama swojej własnej konstrukcji, zastąpisz panoramę domyślną.

Poniższy przykład pokazuje znaczniki wskazujące różne lokalizacje wokół Astor Place w Nowym Jorku. Przełącz wyświetlacz na Street View, aby pokazać udostępnione znaczniki w: StreetViewPanorama.

let panorama: google.maps.StreetViewPanorama;

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

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

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

  const cafeIcon = document.createElement("img");
  cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");
  dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");
  busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";


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

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

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    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 = map.getStreetView()!; // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

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

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

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

let panorama;

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

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

  const cafeIcon = document.createElement("img");

  cafeIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");

  dollarIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");

  busIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    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 = map.getStreetView(); // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    },
  );
}

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

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

window.initMap = initMap;
index.js

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

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

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

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

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

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

    <!-- 
      The `defer` attribute causes the 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&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Wydarzenia Street View

Podczas przechodzenia między Street View lub manipulowania orientacją możesz chcieć monitorować kilka zdarzeń, które wskazują zmiany stanu elementu StreetViewPanorama:

• Przycisk pano_changed jest uruchamiany po każdej zmianie identyfikatora panoramy. To zdarzenie nie gwarantuje, że żadne powiązane dane w obrębie panoramy (takie jak linki) również ulegną zmianie do momentu wywołania zdarzenia. Wskazuje ono jedynie, że identyfikator panoramy uległ zmianie. Zauważ, że identyfikator panoramy (który można wykorzystać do wskazywania tej panoramy) jest stabilny tylko w trakcie bieżącej sesji przeglądarki.
• Przycisk position_changed uruchamia się, gdy zmieni się bazowa pozycja panoramy (LatLng). Obrócenie panoramy nie wywoła tego zdarzenia. Pamiętaj, że możesz zmienić pozycję bazową panoramy bez zmiany powiązanego identyfikatora panoramy, ponieważ interfejs API automatycznie powiąże najbliższy identyfikator panoramy z położeniem panoramy.
• Tag pov_changed jest uruchamiany za każdym razem, gdy zmienia się właściwość StreetViewPov w Street View. Pamiętaj, że to zdarzenie może zostać uruchomione, gdy położenie i identyfikator panoramy pozostają stabilne.
• Tag links_changed jest uruchamiany za każdym razem, gdy zmienią się linki do Street View. Pamiętaj, że to zdarzenie może uruchamiać się asynchronicznie po zmianie identyfikatora panoramy wskazanej w pano_changed.
• Pole visible_changed jest uruchamiane przy każdej zmianie widoczności w Street View. Pamiętaj, że to zdarzenie może uruchamiać się asynchronicznie po zmianie identyfikatora panoramy wskazanej w pano_changed.

Ten kod ilustruje, jak można obsługiwać te zdarzenia w celu zbierania danych o bazowym elemencie StreetViewPanorama:

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

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

/* 
 * 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>
  <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

Elementy sterujące Street View

Podczas wyświetlania panoramy StreetViewPanorama domyślnie pojawiają się na niej różne elementy sterujące. Te ustawienia możesz włączyć lub wyłączyć, ustawiając odpowiednie pola w StreetViewPanoramaOptions na true lub false:

• panControl umożliwia obracanie panoramy. Ten element sterujący jest wyświetlany domyślnie jako standardowy zintegrowany kompas i sterowanie przesuwaniem. Pozycję elementu sterującego możesz zmienić, podając PanControlOptions w polu panControlOptions.
• zoomControl umożliwia powiększenie obrazu. Ten element jest domyślnie widoczny w prawym dolnym rogu panoramy. Wygląd elementu sterującego możesz zmienić, wpisując ZoomControlOptions w polu zoomControlOptions.
• addressControl zawiera nakładkę tekstową z adresem powiązanej lokalizacji oraz link do jej otwarcia w Mapach Google. Wygląd elementu sterującego możesz zmienić, wpisując StreetViewAddressControlOptions w polu addressControlOptions.
• fullscreenControl umożliwia otwieranie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, wpisując FullscreenControlOptions w polu fullscreenControlOptions.
• motionTrackingControl umożliwia włączenie lub wyłączenie śledzenia ruchu na urządzeniach mobilnych. To ustawienie jest widoczne tylko na urządzeniach, które obsługują zdarzenia orientacji urządzenia. Domyślnie ten element sterujący znajduje się w prawym dolnym rogu panoramy. Położenie elementu sterującego możesz zmienić za pomocą parametru MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji dotyczącej śledzenia ruchu.
• linksControl zawiera na obrazie strzałki pomocnicze, które pozwalają przejść do sąsiednich zdjęć panoramicznych.
• Element sterujący Zamknij umożliwia użytkownikowi zamknięcie przeglądarki Street View. Kontrolę zamknięcia możesz włączyć lub wyłączyć, ustawiając enableCloseButton na true lub false.

W poniższym przykładzie można zmienić elementy sterujące wyświetlane w powiązanym widoku Street View i usunąć linki do tego widoku:

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

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

/* 
 * 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>
  <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

Bezpośredni dostęp do danych Street View

Możesz automatycznie określać dostępność danych Street View lub zwracać informacje o konkretnych panoramach bez konieczności bezpośredniego manipulowania mapą czy panoramą. Możesz to zrobić za pomocą obiektu StreetViewService, który udostępnia interfejs do danych przechowywanych w usłudze Street View Google.

Żądania usług Street View

Dostęp do usługi Street View jest asynchroniczny, ponieważ interfejs API Map Google musi wywołać serwer zewnętrzny. Z tego powodu musisz przekazać metodę wywołania zwrotnego, która zostanie wykonana po zakończeniu żądania. Ta metoda wywołania zwrotnego przetwarza wynik.

Prośby do StreetViewService możesz inicjować za pomocą StreetViewPanoRequest lub StreetViewLocationRequest.

Żądanie używające funkcji StreetViewPanoRequest zwraca dane panoramy z identyfikatorem referencyjnym, który jednoznacznie identyfikuje panoramę. Pamiętaj, że identyfikatory referencyjne są stałe tylko przez cały okres istnienia zdjęć danej panoramy.

Żądanie korzystające z funkcji StreetViewLocationRequest wyszukuje dane panoramiczne w określonej lokalizacji przy użyciu następujących parametrów:

• location określa lokalizację (długość i szerokość geograficzna), w której chcesz wyszukać panoramę.
• preference określa preferowany obszar, na którym dana panorama ma znajdować się w określonym promieniu: ta najbliższa podanej lokalizacji lub najlepsza na danym obszarze.
• radius określa promień (w metrach), w którym należy wyszukać panoramę, wyśrodkowany na danej szerokości i długości geograficznej. Jeśli nie zostanie podany, domyślna wartość to 50.
• source określa źródło panoram do przeszukania. Prawidłowe wartości to:
  • default korzysta z domyślnych źródeł Street View. Wyszukiwanie nie jest ograniczone do konkretnych źródeł.
  • outdoor ogranicza wyszukiwanie do kolekcji plenerowych. W danej lokalizacji mogą nie być dostępne panoramy na zewnątrz.

Odpowiedzi usługi Street View

Funkcja getPanorama() wymaga funkcji wywołania zwrotnego, aby została wykonana po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zbiór danych panoramy w obiekcie StreetViewPanoramaData oraz kod StreetViewStatus, który wskazuje stan żądania (w tej kolejności).

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane dotyczące panoramy Street View w tym formacie:

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

Zwróć uwagę, że ten obiekt danych nie jest obiektem StreetViewPanorama. Aby utworzyć obiekt Street View przy użyciu tych danych, musisz utworzyć obiekt StreetViewPanorama i wywołać funkcję setPano(), przekazując do niego identyfikator podany w zwróconym polu location.pano.

Kod status może zwrócić jedną z tych wartości:

• OK oznacza, że usługa znalazła pasującą panoramę.
• ZERO_RESULTS oznacza, że usłudze nie udało się znaleźć panoramy spełniającej kryteria.
• UNKNOWN_ERROR oznacza, że nie udało się przetworzyć żądania Street View, ale dokładna przyczyna jest nieznana.

Ten kod tworzy StreetViewService, który odpowiada na kliknięcie mapy przez użytkownika, tworząc znaczniki, które po kliknięciu wyświetlają StreetViewPanorama danej lokalizacji. W kodzie używana jest zawartość StreetViewPanoramaData zwrócona z usługi.

/*
 * 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

/*
 * 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

/* 
 * 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>
  <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

Tworzenie niestandardowych panoram Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama. Korzystając z niestandardowych panoram, możesz pokazać wnętrze budynków, widoki z malowniczych miejsc lub dowolne obiekty, które według Ciebie chcesz wymyślić. Możesz nawet połączyć te niestandardowe panoramy z istniejącymi panoramami Google Street View.

Aby skonfigurować zestaw niestandardowych zdjęć panoramicznych, wykonaj te czynności:

• Utwórz podstawowy obraz panoramiczny dla każdej panoramy niestandardowej. Powinien on być w najwyższej rozdzielczości, w której chcesz wyświetlać powiększony obraz.
• (Opcjonalne, ale zalecane) Utwórz zestaw kafelków do panoram przy różnych poziomach powiększenia zdjęcia podstawowego.
• Twórz połączenia między niestandardowymi panoramami.
• (Opcjonalnie) Oznacz „wejściowe” panoramy na istniejących zdjęciach Google Street View i dostosuj linki do zestawu niestandardowego i do standardowego zestawu.
• Określ metadane każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
• Zaimplementuj metodę, która określa dane i obrazy niestandardowe panoramy oraz wyznacz ją jako niestandardową metodę obsługi w obiekcie StreetViewPanorama.

Wyjaśniamy to w sekcjach poniżej.

Tworzenie niestandardowych panoram

Każda panorama Street View to zdjęcie lub zestaw zdjęć przedstawiających pełny widok z jednego miejsca w pełnym zakresie 360 stopni. Obiekt StreetViewPanorama korzysta z obrazów zgodnych z odwzorowaniem walcowym równoodległościowym (Plate Carrée). Takie rzutowanie obejmuje widok w poziomie o 360 stopni (pełne zawinięcie) i 180 stopni w widoku pionowym (od prostej do prawej). Te pola widzenia pozwalają uzyskać obraz o współczynniku proporcji 2:1. Poniżej widać panoramę w całości.

Zdjęcia panoramiczne uzyskuje się zazwyczaj przez zrobienie wielu zdjęć z jednej pozycji i łączenie ich w oprogramowaniu do tworzenia panoram. Więcej informacji znajdziesz w artykule Porównanie aplikacji do łączenia zdjęć w Wikipedii. Takie zdjęcia powinny znajdować się w tym samym miejscu „aparatu”, z którego zostały wykonane wszystkie panoramy. Powstała w ten sposób panorama 360 stopni może stworzyć odwzorowanie kuli z obrazem zawiniętym w dwuwymiarową powierzchnię tej kuli.

Przy dzieleniu zdjęcia na prostokątne kafelki i udostępnianiu zdjęć na podstawie obliczonych współrzędnych tych kafelków warto traktować panoramę jako odwzorowanie kuli z użyciem prostoliniowego układu współrzędnych.

Tworzenie niestandardowych kafelków panoramy

Street View obsługuje też różne poziomy szczegółowości obrazu za pomocą elementów sterujących powiększeniem, które umożliwiają powiększanie i pomniejszanie z widoku domyślnego. Zasadniczo Street View zapewnia pięć poziomów powiększenia każdego zdjęcia panoramicznego. Gdyby do obsługi wszystkich poziomów powiększenia miał służyć pojedynczy obraz panoramiczny, byłby on dość duży i znacznie spowalniał działanie aplikacji lub miał tak niską rozdzielczość przy większym powiększeniu, przez co obraz byłby słabo rozpikselowany. Na szczęście możemy skorzystać z podobnego wzorca projektowania wykorzystywanego do wyświetlania kafelków mapy Google przy różnych poziomach powiększenia, dzięki czemu zapewnimy odpowiednią rozdzielczość zdjęć panoramicznych w każdym stopniu.

Po pierwszym wczytaniu elementu StreetViewPanorama domyślnie wyświetlany jest obraz składający się z 25% (90 stopni łuku) panoramy w poziomie na poziomie powiększenia 1. Ten widok odpowiada polu widzenia normalnego człowieka. Powiększanie „oddalania” z tego widoku domyślnego powoduje ogólnie szerszy zakres, a powiększanie zawęża pole widzenia do mniejszego łuku. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a potem wybiera obraz, który najlepiej pasuje do tej rozdzielczości, wybierając zestaw kafelków, który mniej więcej odpowiada wymiarom poziomego pola widzenia. Te pola widoku odpowiadają poziomom powiększenia Street View:

Pamiętaj, że rozmiar zdjęcia wyświetlanego w Street View zależy całkowicie od rozmiaru ekranu (szerokość) kontenera Street View. Jeśli udostępnisz szerszy kontener, usługa nadal będzie zapewniać to samo pole widzenia dla każdego poziomu powiększenia, ale może zamiast tego wybrać kafelki bardziej odpowiednie do tej rozdzielczości.

Każda panorama składa się z odwzorowania walcowego równoodległościowego, dlatego tworzenie fragmentów panoram jest stosunkowo proste. Obraz w proporcjach ma format 2:1, dlatego są łatwiejsze w użyciu kafelki o współczynniku 2:1, chociaż kwadratowe fragmenty mogą działać lepiej na mapach kwadratowych (ponieważ pole widzenia jest kwadratowe).

W przypadku kafelków w formacie 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje cały „świat” panoramy (obraz podstawowy) na poziomie powiększenia 0, przy czym każdy rosnący poziom powiększenia oferuje 4 kafelki ^zoomLevel. (np. przy powiększeniu 2 cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia w widoku Street View nie pasują bezpośrednio do poziomów powiększenia określonych za pomocą elementu Street View. Zamiast tego poziomy powiększenia w widoku Street View są wybierane w ramach pola widoku, z którego są wybierane odpowiednie kafelki.

Ogólnie warto nadać nazwy kafelkom obrazów, aby można je było wybierać automatycznie. Sposób nazewnictwa znajdziesz w sekcji Obsługa niestandardowych żądań panoramy poniżej.

Obsługa żądań dotyczących niestandardowych panoram

Aby użyć panoramy niestandardowej, wywołaj StreetViewPanorama.registerPanoProvider() i podaj nazwę swojej metody dostawcy panoram. Metoda dostawcy panoramy musi zwracać obiekt StreetViewPanoramaData i musi mieć następujący podpis:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData jest obiektem o następującej postaci:

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

Swoją panoramę możesz wyświetlać w ten sposób:

• Ustaw właściwość StreetViewPanoramaOptions.pano na wartość niestandardową.
• Wywołaj StreetViewPanorama.registerPanoProvider(), by podać funkcję dostawcy niestandardowej panoramy.
• Wdróż niestandardową funkcję dostawcy panoram do obsługi określonej wartości pano.
• Utwórz obiekt StreetViewPanoramaData.
• Ustaw właściwość StreetViewTileData.getTileUrl na nazwę dostarczonej przez Ciebie funkcji niestandardowego dostawcy kafelków. Przykład: getCustomPanoramaTileUrl.
• Zaimplementuj niestandardową funkcję dostawcy kafelków, jak pokazano w poniższych przykładach.
• Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio position na urządzeniu StreetViewPanorama, gdy chcesz wyświetlać panoramy niestandardowe, bo taka pozycja spowoduje, że Street View poprosi o domyślne zdjęcia Street View w pobliżu tego miejsca. Zamiast tego ustaw tę pozycję w polu location.latLng niestandardowego obiektu StreetViewPanoramaData.

Poniższy przykład przedstawia niestandardową panoramę biura Google w Sydney. Uwaga: w tym przykładzie nie ma mapy ani domyślnych zdjęć Street View:

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

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

/* 
 * 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>
  <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

Dostawca niestandardowej panoramy zwróci odpowiedni kafelek na podstawie przekazanego identyfikatora, poziomu powiększenia i współrzędnych kafelka panoramy. Wybór obrazu zależy od tych przekazywanych wartości, dlatego warto nadać obrazom nazwy, które można wybierać automatycznie na podstawie przekazanych wartości, np. pano_zoom_tileX_tileY.png.

W poniższym przykładzie, oprócz domyślnych strzałek nawigacyjnych w Street View, dodano do obrazu kolejną strzałkę, która wskazuje Google Sydney i zawiera linki do zdjęć niestandardowych:

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

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

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

#street-view {
  height: 100%;
}
style.css

<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