Usługa Street View

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Przegląd

Wybierz platformę: Android iOS JavaScript

Google Street View udostępnia panoramiczne widoki z wyznaczonych dróg, które rozciągają się z całego obszaru. Zasięg interfejsu Street View API jest taki sam jak w przypadku aplikacji Mapy Google (https://maps.google.com/). Lista obecnie obsługiwanych miast w Street View jest dostępna na stronie Map Google.

Przykładowe zdjęcie Street View znajdziesz poniżej.


Interfejs Maps JavaScript API udostępnia usługę Street View do pobierania zdjęć i manipulowania nimi w Street View. Ta usługa Street View jest natywnie obsługiwana w przeglądarce.

Wykorzystanie mapy Street View

Chociaż funkcji Street View można używać w samodzielnym elemencie DOM, najlepiej sprawdza się ona przy określaniu lokalizacji na mapie. Domyślnie Street View jest włączone na mapie, a w elementach sterujących nawigacją (powiększanie i przesuwanie) pojawiają się elementy sterujące Pegmanem. Możesz ukryć to ustawienie na mapie MapOptions, ustawiając streetViewControl na false. Możesz też zmienić domyślną pozycję elementu Street View, ustawiając we właściwości streetViewControlOptions.position właściwość Map na nową właściwość ControlPosition.

Element Street View Pegman umożliwia wyświetlanie widoków Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zostanie zaktualizowana, aby wyświetlić niebieskie kontury ulic z obsługą Street View. Umożliwi to korzystanie z aplikacji podobnie jak w aplikacji Mapy Google.

Gdy użytkownik upuści znacznik Pegmana na ulicę, zostanie ona zaktualizowana przez mapę i pojawi się panorama Street View we wskazanej lokalizacji.

Panoramy Street View

Obrazy w Street View są obsługiwane przez obiekt StreetViewPanorama, który udostępnia interfejs API Street View. Każda mapa zawiera domyślną panorama Street View, którą można pobrać, wywołując metodę mapy przy użyciu metody getStreetView(). Gdy dodasz do mapy opcję Street View, ustawiając jej opcję streetViewControl na true, automatycznie połączysz Pegmana z tą domyślną panoramą Street View.

Możesz też utworzyć własny obiekt StreetViewPanorama i ustawić mapę tak, by używała go zamiast wartości domyślnej, ustawiając właściwość streetView mapy bezpośrednio na tym skonstruowanym obiekcie. Możesz zmienić domyślną panorama, jeśli chcesz zmienić domyślne działanie, np. automatyczne udostępnianie nakładki między mapą a panoramą. Zobacz sekcję Nakładki w Street View poniżej.

Kontenery Street View

Zamiast tego lepiej jest wyświetlić właściwość StreetViewPanorama w osobnym elemencie DOM, często jako element <div>. Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama&#39. Aby zapewnić optymalny wyświetlanie obrazów, zalecamy minimalny rozmiar 200 x 200 pikseli.

Uwaga: chociaż z funkcji Street View można korzystać w połączeniu z mapą, nie jest to wymagane. Możesz użyć osobnego obiektu Street View bez mapy.

Lokalizacje Street View i punkt widzenia

Konstruktor StreetViewPanorama umożliwia też ustawienie lokalizacji i punktu widzenia Street View za pomocą parametru StreetViewOptions. Aby zmienić lokalizację i punkt widzenia, po wywołaniu obiektu możesz wywołać funkcje setPosition() i setPov().

Lokalizacja w Street View określa położenie ostrości kamery, ale nie określa jej orientacji. W tym celu obiekt StreetViewPov definiuje 2 właściwości:

  • heading (domyślnie 0) określa kąt obrotu wokół wierzchołka kamery w stosunku do prawdziwej północy. Nagłówki są mierzone w prawo (90 stopni to wschodni wschód).
  • pitch (domyślnie 0) określa wąski kąta w początku i w kierunku kamery, czyli często jest (ale nie zawsze) płaski w poziomie. Na przykład zdjęcie zrobione na wzgórzu będzie zaprezentować domyślną wartość, która nie jest pozioma. Kąt nachylenia jest mierzony z użyciem wartości dodatnich (do +90 stopni w górę i ortogona do wartości domyślnej) i ujemnych (od -90 stopni w prawo i w dół do wysokości domyślnej).

Obiekt StreetViewPov jest najczęściej używany do określania punktu widzenia aparatu w Street View. Za pomocą metody StreetViewPanorama.getPhotographerPov() możesz też określić punkt widzenia fotografa – zazwyczaj w kierunku samochodu lub trójkołowca.

Poniższy kod przedstawia mapę Bostonu z początkowym widokiem na park Fenway. Wybranie Pegmana i przeciągnięcie go w obsługiwane miejsce na mapie zmieni widok Street View:

TypeScript

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

  map.setStreetView(panorama);
}

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

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;

CSS;

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

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

HTML;

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

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

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

Fragment

Śledzenie ruchu na urządzeniach mobilnych

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

Jako deweloper aplikacji możesz zmienić domyślne działanie w ten sposób:

  • Włączanie i wyłączanie funkcji śledzenia ruchu. Domyślnie śledzenie ruchu jest włączone na każdym urządzeniu, które je obsługuje. Poniższy przykład wyłącza śledzenie ruchu, ale pozostawia funkcje śledzenia ruchu widoczne. (Pamiętaj, że użytkownik może włączyć śledzenie ruchu, dotykając elementu sterującego).
    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ż ustawienie śledzenia ruchu. Domyślnie ten element sterujący jest wyświetlany na urządzeniach obsługujących śledzenie ruchu. Użytkownik może włączać i wyłączać śledzenie ruchu, korzystając z elementu sterującego. Pamiętaj, że element ten nigdy się nie pojawi, jeśli urządzenie nie obsługuje śledzenia ruchu, niezależnie od wartości motionTrackingControl.

    Poniższy przykładowy kod wyłącza śledzenie ruchu i kontrolę ruchu. W takim 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ę sterowania ruchem. Domyślnie ten element sterujący znajduje się w prawym dolnym rogu okna panoramicznego (pozycja RIGHT_BOTTOM). W poniższym przykładzie określono jego pozycję na dole po lewej stronie:
    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 przykład na urządzeniu mobilnym (lub na dowolnym 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 wyświetlają się zwykle na poziomie „ulicy” i są zakotwiczone w pozycji LatLng. Znaczniki pojawią się na przykład za pomocą ogonów zakotwiczonych na lokalizacji w orientacji poziomej w widoku Street View.

Obecnie typy nakładek obsługiwanych na zdjęciach Street View są ograniczone do Marker, InfoWindow i niestandardowych OverlayView. Nakładki wyświetlane na mapie mogą być wyświetlane w widoku Street View, traktując daną panoramę jako zamiennik obiektu Map, wywołując setMap() i przekazując StreetViewPanorama jako argument zamiast mapy. Okna informacyjne można też otworzyć w panoramice Street View, wywołując open(), przekazując StreetViewPanorama() zamiast mapy.

Gdy tworzysz mapę z domyślną wartością StreetViewPanorama, wszelkie znaczniki tworzone na tej mapie są automatycznie udostępniane na mapie powiązanej z tą panoramą, o ile jest widoczna. Aby pobrać domyślną panorama Street View, wywołaj obiekt getStreetView() w obiekcie Map. Pamiętaj, że jeśli ustawisz właściwość streetView mapy na StreetViewPanorama z Twoją konstrukcją, zastąpisz domyślną panorama.

Poniższy przykład pokazuje znaczniki wskazujące różne lokalizacje w miejscowości Astor Place w Nowym Jorku. Przełącz wyświetlacz w Street View, aby wyświetlić znaczniki widoczne w StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

JavaScript

let panorama;

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

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

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

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

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

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

window.initMap = initMap;

CSS;

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

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

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

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

HTML;

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

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

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

Fragment

Wydarzenia Street View

Gdy poruszasz się między Street View lub modyfikujesz orientację, możesz monitorować kilka zdarzeń wskazujących zmiany w stanie StreetViewPanorama:

  • pano_changed uruchamia się za każdym razem, gdy zmieni się identyfikator panoramicznej listy. To zdarzenie nie gwarantuje, że wszystkie powiązane dane na mapie (np. linki) zmieniły się również w momencie jego uruchomienia. To zdarzenie oznacza tylko, że zmienił się identyfikator panoramicznej. Identyfikator panoramy (który możesz wykorzystać w odniesieniu do tej panoramicznej scenerii) jest stabilny tylko w bieżącej sesji przeglądarki.
  • position_changed uruchamia się za każdym razem, gdy bazowa pozycja (LatLng) się zmienia. Obracanie animacji nie spowoduje uruchomienia tego zdarzenia. Pamiętaj, że możesz zmienić pozycję podstawową panoramicznej bez zmiany powiązanego panoramicznego identyfikatora, ponieważ interfejs API będzie automatycznie kojarzyć najbliższy identyfikator panoramicznej z pozycją Panoramy.
  • pov_changed uruchamia się za każdym razem, gdy zmieni się Street View o StreetViewPov. To zdarzenie może się uruchomić, gdy pozycja i identyfikator panoramicznego pozostaną stabilne.
  • links_changed uruchamia się za każdym razem, gdy linki do Street View się zmieniają. To zdarzenie może się uruchamiać asynchronicznie po zmianie identyfikatora panoramicznego określonego za pomocą polecenia pano_changed.
  • visible_changed uruchamia się za każdym razem, gdy zmienia się widoczność Street View. To zdarzenie może się uruchamiać asynchronicznie po zmianie identyfikatora panoramicznego określonego za pomocą polecenia pano_changed.

Ten kod pokazuje, jak można przetwarzać te zdarzenia w celu zbierania danych o bazowych elementach StreetViewPanorama:

TypeScript

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;

CSS;

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

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

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

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

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

HTML;

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

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

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

Fragment

Elementy sterujące Street View

Widok StreetViewPanorama domyślnie wyświetla różne opcje. Aby włączyć lub wyłączyć te opcje, ustaw odpowiednie pola w StreetViewPanoramaOptions na true lub false:

  • panControl umożliwia obrót panoramy. Ta opcja domyślnie pojawia się jako standardowy, zintegrowany kompas i kontrola przesuwania. Możesz zmienić pozycję elementu sterującego, podając wartość PanControlOptions w polu panControlOptions.
  • zoomControl pozwala powiększyć obraz. Ta opcja domyślnie pojawia się w prawym dolnym rogu zdjęcia. Wygląd elementu sterującego możesz zmienić, wpisując ZoomControlOptions w polu zoomControlOptions.
  • addressControl zawiera nakładkę tekstową, która wskazuje adres powiązanej lokalizacji i zawiera link umożliwiający jej otwarcie w Mapach Google. Wygląd elementu sterującego możesz zmienić, wpisując StreetViewAddressControlOptions w polu addressControlOptions.
  • fullscreenControl umożliwia otwarcie widoku Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, wpisując FullscreenControlOptions w polu fullscreenControlOptions.
  • motionTrackingControl umożliwia włączanie i wyłączanie śledzenia ruchu na urządzeniach mobilnych. Ta opcja pojawia się tylko na urządzeniach, które obsługują zdarzenia orientacji urządzenia. Domyślnie ten element sterujący jest wyświetlany w prawym dolnym rogu zdjęcia. Możesz zmienić pozycję elementu sterującego, podając typ MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji o śledzeniu ruchu.
  • Element linksControl zawiera strzałki prowadzące do obrazu, dzięki któremu można przejść do sąsiednich obrazów panoramicznych.
  • Element Zamknij umożliwia użytkownikowi zamknięcie widoku Street View. Możesz włączyć lub wyłączyć ustawienie Zamknij, ustawiając enableCloseButton na true lub false.

Poniższy przykład pokazuje, jak zmienić elementy sterujące wyświetlane w powiązanym widoku Street View i usunie linki widoku:

TypeScript

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

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

JavaScript

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

window.initPano = initPano;

CSS;

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

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

HTML;

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

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

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

Fragment

Bezpośredni dostęp do danych Street View

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

Prośby o świadczenie usług Street View

Dostęp do usługi Street View jest asynchroniczny, ponieważ interfejs API Map Google musi wywoływać serwer zewnętrzny. Z tego powodu musisz przekazać metodę wywołania zwrotnego, aby wykonać żądanie. Ta metoda wywołania zwrotnego przetwarza wynik.

Możesz wysyłać żądania do StreetViewService za pomocą StreetViewPanoRequest lub StreetViewLocationRequest.

Żądanie za pomocą typu StreetViewPanoRequest zwraca dane panoramiczne z określonym identyfikatorem referencyjnym, który jednoznacznie identyfikuje panoramę. Pamiętaj, że te identyfikatory referencyjne są stabilne tylko przez cały czas trwania zdjęcia panoramicznego.

Żądanie korzystające z funkcji StreetViewLocationRequest wyszukuje dane z panoramy w określonej lokalizacji, korzystając z tych parametrów:

  • location określa lokalizację (szerokość i długość geograficzną), by wyszukać panorama.
  • preference określa, w przypadku której promienia ma znaleźć się panorama – najbliższa podana lokalizacja lub najwyższa.
  • radius ustawia promień, podany w metrach, w którym można wyszukać panoramę na podstawie danej szerokości i długości geograficznej. Jeśli nie zostanie podany, wartość domyślna to 50.
  • source określa źródło widoków panoramicznych do wyszukania. Prawidłowe wartości to:
    • default korzysta z domyślnych źródeł w Street View; wyszukiwania nie są ograniczone do określonych źródeł.
    • outdoor ogranicza wyszukiwania do kolekcji na zewnątrz. Pamiętaj, że w przypadku określonej lokalizacji mogą nie istnieć widoki zewnętrzne.

Odpowiedzi usługi Street View

Funkcja getPanorama() wymaga wywołania wywołania zwrotnego po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zestaw danych panoramicznej w obiekcie StreetViewPanoramaData i kod StreetViewStatus wskazujący stan żądania, w tej kolejności.

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane związane z panoramą Street View w następującej formie:

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

Pamiętaj, że ten obiekt danych nie jest obiektem StreetViewPanorama. Aby utworzyć obiekt Street View z wykorzystaniem tych danych, musisz utworzyć StreetViewPanorama i wywołać obiekt setPano(), przekazując go identyfikator podany w polu location.pano.

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

  • OK wskazuje, że usługa znalazła pasującą panorama.
  • ZERO_RESULTS oznacza, że usługa nie mogła znaleźć pasującej panoramicznej lokalizacji z zaliczonymi kryteriami.
  • UNKNOWN_ERROR wskazuje, że nie udało się przetworzyć żądania Street View, ale dokładna przyczyna jest nieznana.

Ten kod tworzy znaczniki StreetViewService, które odpowiadają na kliknięcia użytkownika przez utworzenie mapy. Tworzy ona znaczniki, które po kliknięciu wskazują jego StreetViewPanorama. Kod wykorzystuje zawartość StreetViewPanoramaData zwracaną z usługi.

TypeScript

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

window.initMap = initMap;

CSS;

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

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

HTML;

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

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

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

Fragment

Dostarczanie niestandardowych widoków Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych widoków w obiekcie StreetViewPanorama. Korzystając z niestandardowych widoków, możesz zaprezentować wnętrze budynków, widoki z malowniczych lokalizacji lub dowolne inne elementy. Możesz nawet połączyć je z panoramą Google Street View.

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

  • Utwórz podstawowy obraz panoramiczny dla każdej niestandardowej fotografii. Powinien on być w najwyższej rozdzielczości, w której chcesz wyświetlać obrazy w powiększeniu.
  • (Opcjonalnie, ale zalecane) Utwórz zestaw panoramicznych kafelków przy różnych poziomach powiększenia z obrazu podstawowego.
  • Twórz połączenia między niestandardowymi panoramami.
  • Opcjonalnie: wyznacz &panoramiczne widoki z obecnych zdjęć Street View i dostosuj linki do lub z niestandardowego zestawu do standardowego.
  • Zdefiniuj metadane dla każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
  • Zaimplementuj metodę, która określa niestandardowe dane panoramiczne i obrazy, i oznacz tę metodę jako niestandardową aplikację w obiekcie StreetViewPanorama.

Wyjaśnia to poniższe sekcje.

Tworzenie niestandardowych widoków

Każda panorama Street View to zdjęcie lub zestaw zdjęć, które zapewniają pełny widok 360 stopni z jednego miejsca. Obiekt StreetViewPanorama używa obrazów, które są zgodne z odwzorowaniem walcowym równoodległościowym (Plate Carrée). Odwzorowanie to obejmuje 360 stopni w orientacji poziomej i 180 stopni w pionie (od góry do góry). W ten sposób uzyskujesz obraz o współczynniku proporcji 2:1. Poniżej wyświetli się pełna panorama.

Panoramy można zazwyczaj pobrać z jednego miejsca i połączyć je w programie, który składa się z jednego miejsca. Więcej informacji znajdziesz w artykule Porównanie aplikacji do łączenia zdjęć w Wikipedii. Takie zdjęcia powinny mieć jeden punkt orientacyjny, z którego będą tworzone poszczególne zdjęcia panoramiczne. Powstała panorama 360° może następnie definiować projekcję na sferze z obrazem ujętym w dwuwymiarową powierzchnię kuli.

Traktuj panorama jako projekcję na sferze z prostokątnym układem współrzędnych, co jest przydatne przy dzieleniu obrazu na kafelki prostokątne i wyświetlaniu obrazów na podstawie obliczonych współrzędnych.

Tworzenie niestandardowych kafelków panoramicznych

Street View obsługuje też różne poziomy szczegółowości zdjęć, korzystając z elementu sterującego powiększeniem, dzięki któremu można powiększać i pomniejszać widok domyślny. Ogólnie Street View udostępnia 5 poziomów powiększenia dla każdego zdjęcia panoramicznego. Jeśli chcesz używać jednego obrazu panoramicznego do obsługi wszystkich poziomów powiększenia, musi on być dostatecznie duży i znacznie spowolnić działanie aplikacji lub mieć niską rozdzielczość przy wyższych poziomach powiększenia, aby wyświetlić słabo pikselowy obraz. Na szczęście możemy użyć podobnego wzoru używanego do wyświetlania kafelków mapy Google przy różnych poziomach powiększenia, aby uzyskać odpowiednie obrazy do panoramicznego poziomu na każdym poziomie powiększenia.

Po pierwszym wczytaniuStreetViewPanorama domyślnie wyświetlany jest obraz składający się z 25% (90 stopni) łuku w poziomie na poziomie powiększenia 1. Taki widok odpowiada normalnemu polu widzenia. Powiększanie i pomniejszanie w widoku domyślnym powoduje poszerzenie łuku, a powiększenie powoduje zawężenie pola widoku do mniejszego. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera zdjęcia najlepiej dopasowane do tej rozdzielczości, wybierając zestaw kafelków o zbliżonym rozmiarze do pola poziomego. Te pola widoku mapy odpowiadają poziomom powiększenia Street View:

Poziom powiększenia Street View Pole widzenia (stopnie)
0 180
1 (domyślnie) 90
2 45
3 22,5
4 11,25

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

Każda panorama składa się z odwzorowania walcowego równomiernego, dlatego tworzenie fragmentów w tym formacie jest stosunkowo proste. Projekt ma współczynnik proporcji 2:1 i jest łatwiejszy w użyciu, jednak użycie kafelków kwadratowych pozwala uzyskać większą skuteczność na mapach kwadratowych (ponieważ pole widzenia jest kwadratowe).

W przypadku 2 kafelków 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje cały obraz panoramiczny (obraz podstawowy) na poziomie powiększenia 0, przy czym każdy przyrostowy poziom powiększenia ma 4 powiększenie. (np. przy poziomie powiększenia 2 cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia w kafelkach Street View nie są bezpośrednio dopasowane do poziomu powiększenia określonego za pomocą ustawienia Street View. Zamiast tego poziom powiększenia w Street View wybiera pole widzenia, z którego wybiera się odpowiednie kafelki.

Zasadniczo warto nazwać kafelki obrazów, aby można było je wybrać automatycznie. Schemat nazewnictwa znajdziesz w sekcji Obsługa żądań niestandardowych widoków panoramicznych poniżej.

Obsługa niestandardowych próśb o panoramę

Aby użyć niestandardowej tapety, wywołaj metodę StreetViewPanorama.registerPanoProvider(), podając jej nazwę. Metoda dostawcy panorama musi zwracać obiekt StreetViewPanoramaData i mieć ten podpis:

Function(pano):StreetViewPanoramaData

Element StreetViewPanoramaData jest obiektem następującego formularza:

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

Wyświetl niestandardową miniaturę w następujący sposób:

  • Ustaw właściwość StreetViewPanoramaOptions.pano na wartość niestandardową.
  • Wywołaj StreetViewPanorama.registerPanoProvider(), aby dostarczyć niestandardową funkcję dostawcy panoramicznych.
  • Zaimplementuj funkcję niestandardowego dostawcy panoramicznej, aby obsłużyć określoną wartość pano.
  • utworzyć obiekt StreetViewPanoramaData,
  • Ustaw właściwość StreetViewTileData.getTileUrl na nazwę dostarczonej przez Ciebie funkcji niestandardowego kafelka. Na przykład: getCustomPanoramaTileUrl.
  • Zaimplementuj niestandardową funkcję dostawcy kafelka, jak pokazano w przykładach poniżej.
  • Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio position w polu StreetViewPanorama, gdy chcesz wyświetlać niestandardowe widoki, ponieważ spowoduje to wysłanie do Street View prośby o domyślne zdjęcia Street View w pobliżu tej lokalizacji. Zamiast tego ustaw ją w niestandardowym polu StreetViewPanoramaData obiektu location.latLng.

Poniższy przykład pokazuje niestandardową panorama dla biura Google Sydney. Pamiętaj, że w tym przykładzie nie używamy mapy ani domyślnych zdjęć Street View:

TypeScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;

CSS;

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

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

HTML;

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

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

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

Fragment

Dostawca niestandardowych widoków zwraca odpowiedni kafelek na podstawie przekazanego identyfikatora, poziomu powiększenia i współrzędnych mapy. Wybór obrazów zależy od tych przekazywanych wartości, dlatego warto nazwać obrazy, które można automatycznie wybrać na podstawie tych przekazanych wartości, np. pano_zoom_tileX_tileY.png.

Poniższy przykład dodaje do zdjęcia kolejną strzałkę oprócz domyślnych strzałek nawigacyjnych Street View, które wskazują Google Sydney i prowadzą do niestandardowych zdjęć:

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

JavaScript

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

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

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

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

window.initMap = initMap;

CSS;

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

#street-view {
  height: 100%;
}

HTML;

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

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

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

Fragment