Usługa Street View

Przegląd

Wybierz platformę: Android iOS JavaScript

Google Street View udostępnia panoramiczne widoki z wyznaczonych dróg w okolicy obejmujące cały obszar. Zasięg interfejsu Street View API jest taki sam jak w przypadku aplikacji Mapy Google (https://maps.google.com/). Lista obecnie obsługiwanych miast dla 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 obsługiwana natywnie w przeglądarce.

Korzystanie z mapy Street View

Chociaż Street View można używać w samodzielnym elemencie DOM, jest najbardziej przydatny przy określaniu lokalizacji na mapie. Domyślnie funkcja Street View jest włączona na mapie, a przy korzystaniu z elementów sterujących nawigacją (powiększaniem i przesuwaniem) może być widoczna opcja Pegmana. Możesz ukryć ten element sterujący w MapOptions na mapie, ustawiając streetViewControl na false. Możesz też zmienić domyślną pozycję elementu sterującego Street View, ustawiając we właściwości streetViewControlOptions.position obiektu Map nową wartość ControlPosition.

Element sterujący Pegmanem Street View pozwala wyświetlać panoramy Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zostanie zaktualizowana, aby na mapie pojawią się niebieskie kontury wokół ulic obsługujących Street View. Korzystanie z aplikacji jest podobne do w aplikacji Mapy Google.

Gdy użytkownik upuści znacznik Pegmana na ulicę, mapa zostanie zaktualizowana, by wyświetlić panoramę Street View wskazanej lokalizacji.

Panoramy Street View

Obrazy Street View są obsługiwane przez obiekt StreetViewPanorama, który zapewnia interfejs API „przeglądający” Street View. Każda mapa zawiera domyślną panoramę Street View, którą można pobrać, wywołując metodę getStreetView() mapy. 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ć dla niego używanie mapy zamiast domyślnej, ustawiając właściwość mapy streetView bezpośrednio na utworzony obiekt. Jeśli chcesz zmienić domyślne zachowanie, na przykład automatyczne udostępnianie nakładek między mapą a panoramą, możesz zastąpić domyślną panoramę. (Zobacz sekcję Nakładki w Street View poniżej).

Kontenery Street View

Zamiast tego możesz wyświetlić element StreetViewPanorama w oddzielnym elemencie DOM, często w elemencie <div>. Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama. Aby uzyskać optymalny obraz, minimalny rozmiar to 200 x 200 pikseli.

Uwaga: mimo że funkcja Street View jest przeznaczona do użycia z mapą, nie jest to wymagane. Możesz użyć osobnego obiektu Street View bez mapy.

Lokalizacje w Street View i punkt widzenia

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

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

  • heading (domyślna wartość 0) określa kąt obrotu wokół położenia wyrażonego w stopniach w stosunku do prawdziwej północy. Nagłówki są mierzone w prawo (90 stopni to wschód).
  • pitch (domyślna wartość 0) definiuje wariancję kąta „w górę” lub „w dół” względem początkowego domyślnego ustawienia kamery, które często (ale nie zawsze) jest płaskie w poziomie. (Na przykład zdjęcie zrobione na wzgórzu prawdopodobnie pokazuje domyślną prezentację inną niż pozioma). Kąt nachylenia można mierzyć przy zastosowaniu wartości dodatnich (do +90 stopni w górę i w orientacji pionowej do wysokości domyślnej) oraz wartości ujemnych (do -90 stopni w dół i prostokąta w kierunku domyślnym).

Obiekt StreetViewPov jest najczęściej używany do określenia punktu widzenia aparatu w Street View. Możesz także wybrać punkt widzenia fotografa – zazwyczaj w kierunku, w jakim skierowany jest samochód lub trójkołowiec – za pomocą metody StreetViewPanorama.getPhotographerPov().

Poniższy kod przedstawia mapę Bostonu z początkowym widokiem na Park Fenway. Wybranie Pegmana i przeciągnięcie go w obsługiwaną lokalizację na mapie spowoduje zmianę panoramy Street View:

TypeScript

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

  map.setStreetView(panorama);
}

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

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Śledzenie ruchu na urządzeniach mobilnych

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

Deweloper aplikacji może zmienić domyślne działanie w ten sposób:

  • Włącz lub wyłącz funkcję śledzenia ruchu. Domyślnie śledzenie ruchu jest włączone na każdym urządzeniu, które je obsługuje. W przykładzie poniżej wyłączono śledzenie ruchu, ale element ten jest nadal 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 widoczny na urządzeniach, które obsługują śledzenie ruchu. Użytkownik może włączyć lub wyłączyć śledzenie ruchu. Pamiętaj, że element ten nie pojawi się na urządzeniu, które nie obsługuje śledzenia ruchu – niezależnie od wartości motionTrackingControl.

    W przykładzie poniżej wyłączono ś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 element sterujący znajduje się w prawym dolnym rogu panoramy (pozycja RIGHT_BOTTOM). W tym przykładzie ustawiono je na lewy dolny róg: 
    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 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 map. Nakładki wyświetlają się zwykle na poziomie ulicy i są zakotwiczone w pozycji LatLng. (Znaczniki pojawiają się na przykład z ogonami zakotwiczonymi na poziomie samolotu w lokalizacji w Street View).

Obecnie typy nakładek obsługiwanych przez panoramy Street View są ograniczone do Marker, InfoWindow i niestandardowych OverlayView. Nakładki wyświetlane na mapie mogą być wyświetlane w widoku Street View, traktuje panoramę jako zamiennik obiektu Map, wywoływanie setMap() i przekazywanie StreetViewPanorama jako argumentu zamiast mapy. Okna informacyjne można również otworzyć w widoku Street View, wywołując element open(), przekazując wartość StreetViewPanorama() zamiast mapy.

Jeśli utworzysz mapę z domyślną wartością StreetViewPanorama, wszystkie znaczniki utworzone na tej mapie będą automatycznie udostępniane na powiązaną z nią panoramę Street View, o ile jest ona widoczna. Aby pobrać domyślną panoramę Street View, wywołaj obiekt getStreetView() w obiekcie Map. Pamiętaj, że jeśli wyraźnie ustawisz właściwość streetView mapy na StreetViewPanorama własnej konstrukcji, zastąpisz domyślną panoramę.

Poniższy przykład pokazuje znaczniki wskazujące różne lokalizacje w okolicy Astor Place, Nowy Jork. Przełącz widok na Street View, aby wyświetlić udostępnione znaczniki w lokalizacji StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

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

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

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

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

JavaScript

let panorama;

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

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

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

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

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Wydarzenia Street View

Podczas nawigowania po Street View lub manipulowania jego orientacją możesz monitorować kilka zdarzeń, które wskazują zmiany stanu StreetViewPanorama:

  • pano_changed uruchamia się za każdym razem, gdy zmienia się identyfikator panoramy. To zdarzenie nie gwarantuje, że wszystkie powiązane dane z panoramy (np. linki) zmieniły się przed uruchomieniem tego zdarzenia. Oznacza ono tylko zmianę identyfikatora panoramy. Identyfikator panoramy (który można wykorzystać w odniesieniu do tej panoramy) jest stabilny tylko w bieżącej sesji przeglądarki.
  • position_changed uruchamia się za każdym razem, gdy zmienia się bazowa pozycja (LatLng) panoramy. Obrót panoramy nie aktywuje tego zdarzenia. Możesz zmienić położenie podstawy panoramy bez zmiany identyfikatora panoramy, ponieważ interfejs API automatycznie łączy najbliższy identyfikator panoramy z pozycją panoramy.
  • pov_changed uruchamia się za każdym razem, gdy zmienia się StreetViewPov w Street View. To zdarzenie może się uruchomić, gdy pozycja i identyfikator panoramy pozostaną stabilne.
  • links_changed uruchamia się za każdym razem, gdy zmieniają się linki do Street View. To zdarzenie może się asynchronicznie uruchamiać po zmianie identyfikatora panoramy oznaczonej za pomocą pano_changed.
  • visible_changed uruchamia się za każdym razem, gdy zmienia się widoczność Street View. To zdarzenie może się asynchronicznie uruchamiać po zmianie identyfikatora panoramy oznaczonej za pomocą pano_changed.

Ten kod ilustruje, w jaki sposób można przetwarzać te zdarzenia, by zbierać dane na temat obiektu 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;
index.ts

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;
index.js

CSS

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

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

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

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Elementy sterujące Street View

Gdy wyświetlasz element StreetViewPanorama, domyślnie pojawiają się na nim różne elementy sterujące. Możesz włączyć lub wyłączyć te ustawienia, ustawiając odpowiednie pola w StreetViewPanoramaOptions na true lub false:

  • panControl umożliwia obracanie panoramy. Ten element sterujący jest domyślnie wyświetlany jako standardowy, zintegrowany kompas i element sterujący, który należy przesuwać. Możesz zmienić pozycję elementu sterującego, podając wartość PanControlOptions w polu panControlOptions.
  • zoomControl umożliwia powiększanie obrazu. Ta opcja jest domyślnie widoczna w prawym dolnym rogu panoramy. Wygląd elementu sterującego możesz zmienić, podając ZoomControlOptions w polu zoomControlOptions.
  • Pole addressControl zawiera nakładkę tekstową z informacją o adresie powiązanej lokalizacji i udostępnia link umożliwiający otwarcie lokalizacji w Mapach Google. Wygląd elementu sterującego możesz zmienić, podając StreetViewAddressControlOptions w polu addressControlOptions.
  • fullscreenControl umożliwia otwarcie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, podając FullscreenControlOptions w polu fullscreenControlOptions.
  • motionTrackingControl umożliwia włączenie lub wyłączenie śledzenia ruchu na urządzeniach mobilnych. Ta opcja jest widoczna tylko na urządzeniach, które obsługują zdarzenia orientacji. Domyślnie element sterujący znajduje się w prawym dolnym rogu panoramy. Możesz zmienić pozycję elementu sterującego, podając wartość MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji o śledzeniu ruchu.
  • linksControl zawiera strzałki wskazujące obraz, który może wyświetlić się na sąsiednich zdjęciach panoramicznych.
  • Opcja Zamknij pozwala użytkownikowi zamknąć podgląd Street View. Możesz włączyć lub wyłączyć element sterujący Zamknij, ustawiając enableCloseButton na true lub false.

Ten przykład zmienia elementy sterujące wyświetlane w powiązanym Street View i usuwa linki do 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;
index.ts

JavaScript

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Bezpośredni dostęp do danych Street View

Możesz automatycznie określić dostępność danych Street View lub zwrócić informacje o konkretnych panoramach bez konieczności bezpośredniej manipulacji mapą i panoramą. Możesz to zrobić za pomocą obiektu StreetViewService, który zapewnia interfejs do danych przechowywanych w usłudze Street View Google.

Prośby o wykonanie usługi 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.

Żądania do StreetViewService można inicjować za pomocą StreetViewPanoRequest lub StreetViewLocationRequest.

Żądanie korzystające z metody StreetViewPanoRequest zwraca dane panoramy z identyfikatorem referencyjnym, który jednoznacznie identyfikuje panoramę. Pamiętaj, że te identyfikatory referencyjne są stabilne tylko przez cały okres obsługi zdjęć z tą panoramą.

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

  • location określa lokalizację (szerokość i szerokość geograficzną), by wyszukać panoramę.
  • preference określa, jaka panorama powinna znajdować się w pobliżu tego obszaru.
  • radius ustawia promień wyznaczający w metrach, w którym ma szukać panoramy, wyśrodkowanej na podanej szerokości i długości geograficznej. Jeśli nie zostanie podany, przyjmuje domyślnie wartość 50.
  • source określa źródło panoram do wyszukiwania. Prawidłowe wartości:
    • 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 świeżym powietrzu. Pamiętaj, że w przypadku określonej lokalizacji panoramy zewnętrzne mogą nie być dostępne.

Odpowiedzi usługi Street View

Funkcja getPanorama() wymaga funkcji wywołania zwrotnego do wykonania po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zbiór danych panoramy w obiekcie StreetViewPanoramaData i kod StreetViewStatus oznaczający stan żądania w tej kolejności.

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane, które dotyczą panoramy Street View w tej postaci:

{
  "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 na podstawie tych danych, musisz utworzyć StreetViewPanorama i wywołać setPano(), przekazując identyfikator w formie zwróconej w location.pano.

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

  • OK oznacza, że usługa znalazła pasującą panoramę.
  • ZERO_RESULTS oznacza, że usługa nie mogła znaleźć pasującej panoramy na podstawie przyjętych kryteriów.
  • UNKNOWN_ERROR oznacza, że nie udało się przetworzyć żądania Street View, jednak dokładna przyczyna jest nieznana.

Następujący kod tworzy StreetViewService, który reaguje na kliknięcie mapy przez użytkownika, tworząc znaczniki, które po kliknięciu wyświetlają StreetViewPanorama tej lokalizacji. 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;
index.ts

JavaScript

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

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

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Wykonywanie niestandardowych widoków Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama. Dzięki niestandardowym panoramom możesz pokazać wnętrze budynków, widoki z malowniczych miejsc lub dowolnej swojej wyobraźni. Te niestandardowe panoramy możesz nawet połączyć z istniejącymi panoramami Google.

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

  • Utwórz podstawowy obraz panoramiczny dla każdej niestandardowej panoramy. Powinien to być obraz o najwyższej rozdzielczości, w którym chcesz go powiększać.
  • (Opcjonalne, ale zalecane) Utwórz zestaw panoramicznych kafelków na różnych poziomach powiększenia z obrazu podstawowego.
  • Twórz połączenia między niestandardowymi panoramami.
  • (Opcjonalnie) Utwórz panoramy „wejściowe” na istniejących zdjęciach Google Street View i dostosuj linki ze zbioru niestandardowego do standardowego.
  • Zdefiniuj metadane dla każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
  • Zaimplementuj metodę, która określa dane i obrazy obrazów niestandardowych, i wskaż ją jako niestandardowy moduł obsługi w obiekcie StreetViewPanorama.

Więcej informacji na ten temat znajdziesz w sekcjach poniżej.

Tworzenie niestandardowych panoram

Każda panorama Street View to obraz lub zbiór zdjęć, które zapewniają pełny widok 360 stopni z jednego miejsca. Obiekt StreetViewPanorama używa obrazów zgodnych z odwzorowaniem walcowym równoodległościowym (Plate Carrée). Odwzorowanie to obejmuje 360 stopni w poziomie (pełny pełny widok) i 180 stopni w pionie (od prawej do prawej). Te pola widzenia pozwalają uzyskać obraz o współczynniku proporcji 2:1. Poniżej widać pełną panoramę.

Panorama miasta

Zwykle obrazy panoramiczne są wykonywane przez zrobienie wielu zdjęć w jednym miejscu i złączenie ich za pomocą oprogramowania do tworzenia panoram. Więcej informacji znajdziesz w artykule Porównanie aplikacji do łączenia zdjęć w Wikipedii. Takie zdjęcia powinny udostępniać jeden punkt początkowy, w którym robione są poszczególne zdjęcia panoramiczne. Powstała panorama 360° może wówczas definiować odwzorowanie na sferze z obrazem ujętym w dwuwymiarową powierzchnię kuli.

Panoramiczny widok ulicy na jej powierzchni

Korzystanie z panoramy jako odwzorowanie na sferze za pomocą prostokątnego układu współrzędnych jest przydatne, gdy dzielisz obraz na prostokątny kafelek i wyświetlasz na podstawie obliczonych współrzędnych płytek.

Tworzenie niestandardowych kafelków panoramy

Street View obsługuje również różne poziomy szczegółów zdjęcia za pomocą elementów sterujących powiększeniem, które umożliwiają powiększanie i pomniejszanie widoku domyślnego. Ogólnie Street View zapewnia 5 poziomów powiększenia każdego panoramy. Gdyby wyświetlał się tylko jeden obraz panoramiczny, byłby on duży i znacznie spowolniłby działanie aplikacji lub żeby obraz był w niskiej rozdzielczości na wyższych poziomach. Na szczęście możemy użyć podobnego wzoru służącego do wyświetlania kafelków mapy Google na różnych poziomach powiększenia, aby tworzyć odpowiednie obrazy do panoram przy każdym poziomie powiększenia.

Po załadowaniu StreetViewPanorama domyślnie wyświetlany jest obraz składający się z 25% (90 stopni) łuku w poziomie na poziomie powiększenia 1. Ten widok odpowiada mniej więcej normalnemu polu widzenia. Pomniejszanie w widoku domyślnym „szerokim” zapewnia szerszy łuk, a powiększanie tego pola do mniejszego. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera zdjęcia najbardziej odpowiednie dla tej rozdzielczości, wybierając zestaw kafelków mniej więcej taki sam jak wymiary poziomego pola widzenia. Te pola widoku 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ści) kontenera Street View. Jeśli udostępnisz szerszy kontener, usługa będzie nadal mieć to samo pole widzenia dla każdego poziomu 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ównoodległościowego, więc jej tworzenie jest stosunkowo proste. Odwzorowanie zapewnia obraz o współczynniku proporcji 2:1, dlatego używanie płytek o proporcjach 2:1 jest łatwiejsze, chociaż możesz je wyświetlać na mapach kwadratowych, ponieważ pole widoku jest kwadratowe.

W przypadku kafelków 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje cały świat (obraz podstawowy) na poziomie powiększenia 0, przy czym każdy dodatkowy poziom powiększenia oferuje 4 kafelki powiększenia. (Na przykład na poziomie powiększenia 2 cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia widoku płytek Street View nie są bezpośrednio powiązane z poziomami powiększenia oferowanymi za pomocą elementu sterującego Street View. Zamiast tego poziomy powiększenia w Street View wybierają pole widzenia (FoV), z którego dobierane są odpowiednie kafelki.

Widok na miasto z podzielonej kafelkami ulicy

Ogólnie warto ustawić kafelki obrazu tak, aby można je było wybierać automatycznie. Schemat nazewnictwa jest opisany poniżej w sekcji Obsługa niestandardowych próśb o panoramę.

Obsługa niestandardowych próśb o utworzenie panoramy

Aby użyć niestandardowej panoramy, wywołaj funkcję StreetViewPanorama.registerPanoProvider(), podając nazwę metody dostawcy niestandardowej panoramy. Metoda dostawcy panoramy musi zwracać obiekt StreetViewPanoramaData o takim podpisie:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData to obiekt w tej 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
  ]
}

Wyświetlaj niestandardową panoramę w następujący sposób:

  • Ustaw właściwość StreetViewPanoramaOptions.pano na wartość niestandardową.
  • Wywołaj StreetViewPanorama.registerPanoProvider(), aby określić niestandardową funkcję dostawcy panoramy.
  • Zaimplementuj niestandardową funkcję dostawcy panoramy, by obsługiwała określoną wartość pano.
  • utworzyć obiekt StreetViewPanoramaData,
  • Ustaw właściwość StreetViewTileData.getTileUrl na nazwę udostępnionej przez Ciebie funkcji dostawcy kafelków. na przykład getCustomPanoramaTileUrl.
  • Zaimplementuj niestandardową funkcję dostawcy kafelka, tak jak w przykładach poniżej.
  • Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio właściwości position w polu StreetViewPanorama, gdy chcesz wyświetlić niestandardowe panoramy. Takie działanie spowoduje, że usługa Street View poprosi o dodanie domyślnych zdjęć Street View w pobliżu danej lokalizacji. Zamiast tego ustaw tę pozycję w polu location.latLng niestandardowego obiektu StreetViewPanoramaData.

Poniższy przykład pokazuje niestandardową panoramę biura Google Sydney. Pamiętaj, że ten przykład nie wykorzystuje 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;
index.ts

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment

Niestandardowy dostawca panoramy zwraca odpowiedni kafelek na podstawie podanego identyfikatora, poziomu powiększenia i współrzędnych jego fragmentu. Wybór obrazów zależy od przekazywanych wartości, dlatego warto nazwać obrazy, które można wybierać automatycznie, biorąc pod uwagę te przekazane wartości, takie jak pano_zoom_tileX_tileY.png.

Ten przykład dodaje do obrazu kolejną strzałkę oprócz domyślnych strzałek Street View, które kierują do Google Sydney i prowadzą do zdjęć niestandardowych:

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

JavaScript

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

#street-view {
  height: 100%;
}

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
Zobacz przykład

Fragment