Usługa Street View

Opis

Wybierz platformę: Android iOS JavaScript

Google Street View oferuje panoramiczne widoki 360° z wyznaczonych dróg na swoim obszarze. Zasięg interfejsu API Street View jest taki sam jak w przypadku aplikacji Mapy Google (https://maps.google.com/). Lista miast, w których obecnie działa Street View, jest dostępna na stronie Map Google.

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


Interfejs Maps JavaScript API udostępnia usługę Street View, która umożliwia uzyskiwanie zdjęć używanych w Street View w Mapach Google i ich manipulowanie. Ta usługa Street View jest natywnie obsługiwana w przeglądarce.

Wykorzystanie mapy Street View

Chociaż Street View można używać w ramach samodzielnego elementu DOM, jest najbardziej przydatny do wskazywania lokalizacji na mapie. Domyślnie funkcja Street View jest włączona na mapie, a element sterujący Pegmana Street View jest zintegrowany z elementami sterującymi nawigacji (powiększaniem i przesuwaniem). Możesz ukryć ten element sterujący w obszarze MapOptions mapy, ustawiając opcję streetViewControl na false. Możesz też zmienić domyślne położenie elementu sterującego Street View, ustawiając dla właściwości streetViewControlOptions.position obiektu Map nową wartość ControlPosition.

Element sterujący Pegmana ze Street View umożliwia wyświetlanie panoram Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zostanie zaktualizowana i zobaczysz niebieskie kontury ulic z obsługą Street View. W ten sposób interfejs działa podobnie jak w aplikacji Mapy Google.

Gdy użytkownik uniesie znacznik Pegmana na ulicy, mapa zostanie zaktualizowana, aby wyświetlić panoramę Street View wskazanej lokalizacji.

Panoramy Street View

Do obsługi zdjęć Street View używany jest obiekt StreetViewPanorama, który udostępnia interfejs API dla „widzów” Street View. Każda mapa zawiera domyślną panoramę Street View, którą możesz pobrać, wywołując na mapie metodę getStreetView(). Gdy dodasz do mapy element sterujący Street View i ustawisz jego opcję streetViewControl na true, automatycznie połączysz ten element z domyślną panoramą Street View w Street View.

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

Kontenery Street View

Zamiast tego możesz wyświetlać element StreetViewPanorama w osobnym elemencie DOM, często w elemencie <div>. Wystarczy, że przekażesz element DOM w konstruktorze obiektu StreetViewPanorama. W celu zapewnienia optymalnego wyświetlania obrazów zalecamy rozmiar co najmniej 200 x 200 pikseli.

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

Lokalizacje Street View i punkty widzenia

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

Lokalizacja w Street View określa miejsce, w którym będzie ustawiona ostrość, ale nie określa orientacji aparatu podczas tego zdjęcia. W tym celu obiekt StreetViewPov definiuje 2 właściwości:

  • heading (domyślnie 0) określa kąt obrotu wokół lokalizacji kamery w stopniach względem rzeczywistej północy. Nagłówki są mierzone w prawo (90 stopni oznacza rzeczywisty wschód).
  • pitch (domyślnie 0) określa odchylenie kąta „w górę” lub „w dół” od początkowego domyślnego nachylenia kamery, które często (ale nie zawsze) jest płaskie w poziomie. (Na przykład zdjęcie zrobione na wzgórzu prawdopodobnie będzie miało domyślny nachylenie, które nie jest poziome). Kąty nachylenia są mierzone za pomocą wartości dodatnich (90 stopni pionowo w górę i prostokątnych względem domyślnego nachylenia) oraz wartości ujemnych patrzących w dół (do -90 stopni prosto w dół i w prawo do domyślnego nachylenia).

Obiekt StreetViewPov jest najczęściej używany do określenia punktu widzenia kamery Street View. Korzystając z metody StreetViewPanorama.getPhotographerPov(), możesz też ustalić punkt widzenia fotografa – zwykle kierunek, w którym skierowany jest samochód lub rower trójkołowy.

Poniższy kod służy do wyświetlania mapy Bostonu z początkowym widokiem Fenway Park. Wybranie Pegmana i przeciągnięcie go w obsługiwane miejsce 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;

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.
      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>
Zobacz przykład

Wypróbuj fragment

Śledzenie ruchu na urządzeniach mobilnych

Na urządzeniach, które obsługują zdarzenia w orientacji ekranu, interfejs API umożliwia zmianę punktu widzenia Street View na podstawie ruchu urządzenia. Użytkownicy mogą się rozglądać, poruszając urządzeniami. Nazywa się to śledzeniem ruchu lub śledzeniem obrotu urządzenia.

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

  • Włącz lub wyłącz funkcję śledzenia ruchu. Śledzenie ruchu jest domyślnie włączone na każdym urządzeniu, które je obsługuje. Przykład poniżej powoduje wyłączenie śledzenia ruchu, ale element sterujący śledzenia ruchu pozostaje 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 śledzenia ruchu. Domyślnie to ustawienie jest wyświetlane na urządzeniach, które obsługują śledzenie ruchu. Użytkownik może kliknąć element sterujący, aby włączyć lub wyłączyć śledzenie ruchu. Pamiętaj, że element sterujący nigdy się nie wyświetli, jeśli urządzenie nie obsługuje śledzenia ruchu, niezależnie od wartości motionTrackingControl.

    Przykład poniżej powoduje wyłączenie śledzenia ruchu i sterowania nim. W tym przypadku użytkownik nie może włączyć śledzenia ruchu:

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • Zmień domyślną pozycję elementu sterującego śledzenia ruchu. Domyślnie element sterujący pojawia się w prawym dolnym rogu panoramy (pozycja RIGHT_BOTTOM). W poniższym przykładzie ustawiamy element sterujący 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 ten przykład na urządzeniu mobilnym (lub innym urządzeniu, które obsługuje zdarzenia orientacji urządzenia):


Zobacz przykład

Nakładki w Street View

Domyślny obiekt StreetViewPanorama obsługuje natywne wyświetlanie nakładek mapy. Nakładki są zwykle wyświetlane na „poziomie ulicy” zakotwiczonych w pozycji LatLng. (Na przykład na panoramy Street View znaczniki będą zakotwiczone w poziomie płaszczyzny lokalizacji).

Obecnie typy nakładek obsługiwane na panoramach Street View są ograniczone do zdjęć Marker, InfoWindow oraz niestandardowych elementów OverlayView. Nakładki, które wyświetlasz na mapie, mogą być wyświetlane w ramach panoramy Street View. Traktując panoramę jako zamiennik obiektu Map, wywołując setMap() i przekazując StreetViewPanorama jako argument zamiast mapy. Okna informacyjne można w podobny sposób otwierać w ramach panoramy Street View, wywołując opcję open(), przekazując StreetViewPanorama() zamiast mapy.

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

Na poniższym przykładzie pokazano znaczniki oznaczające różne lokalizacje w okolicach Astor Place w Nowym Jorku. Przełącz wyświetlacz na Street View, aby wyświetlić udostępnione znaczniki wyświetlane w obrębie: 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.
      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>
Zobacz przykład

Wypróbuj fragment

Wydarzenia Street View

Podczas nawigowania między Street View lub zmieniania jego orientacji możesz chcieć monitorować kilka zdarzeń, które wskazują zmiany stanu obiektu StreetViewPanorama:

  • pano_changed uruchamia się, gdy zmieni się identyfikator pojedynczej panoramy. To zdarzenie nie gwarantuje, że w momencie wywołania zdarzenia jakiekolwiek dane powiązane z panoramą (np. połączenia) ulegną zmianie. Zdarzenie to wskazuje jedynie, że zmienił się identyfikator panoramy. Pamiętaj, że identyfikator panoramy (który umożliwia odwołanie do panoramy) jest stabilny tylko w bieżącej sesji przeglądarki.
  • position_changed uruchamia się, gdy zmieni się położenie bazowe panoramy (LatLng). Obrót panoramy nie wywoła tego zdarzenia. Pamiętaj, że nie musisz zmieniać powiązanego identyfikatora panoramy, bo interfejs API automatycznie przypisze najbliższy identyfikator panoramy do pozycji panoramy.
  • pov_changed uruchamia się, gdy zmienia się StreetViewPov w Street View. To zdarzenie może zostać uruchomione, gdy położenie i identyfikator panoramy pozostają stabilne.
  • links_changed uruchamia się przy każdej zmianie linków do Street View. Zwróć uwagę, że to zdarzenie może uruchamiać się asynchronicznie po zmianie identyfikatora panoramy wskazanej za pomocą funkcji pano_changed.
  • visible_changed uruchamia się przy każdej zmianie widoczności Street View. Zwróć uwagę, że to zdarzenie może uruchamiać się asynchronicznie po zmianie identyfikatora panoramy wskazanej za pomocą funkcji pano_changed.

Poniższy kod pokazuje, jak można obsługiwać te zdarzenia, aby zbierać dane o podstawowym 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.
      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>
Zobacz przykład

Wypróbuj fragment

Elementy sterujące Street View

Podczas wyświetlania obiektu StreetViewPanorama domyślnie pojawiają się 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. To ustawienie pojawia się domyślnie jako standardowy, zintegrowany element sterujący kompasem i przesunięciem. Możesz zmienić pozycję elementu sterującego, wpisując 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ć, wpisując ZoomControlOptions w polu zoomControlOptions.
  • addressControl to nakładkę tekstową, która wskazuje adres powiązanej lokalizacji z linkiem do jej otwarcia w Mapach Google. Wygląd elementu sterującego możesz zmienić, wpisując StreetViewAddressControlOptions w polu addressControlOptions.
  • fullscreenControl umożliwia otwieranie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, wpisując FullscreenControlOptions w polu fullscreenControlOptions.
  • motionTrackingControl umożliwia włączanie i wyłączanie śledzenia ruchu na urządzeniach mobilnych. To ustawienie jest widoczne tylko na urządzeniach, które obsługują zdarzenia orientacji urządzenia. Domyślnie element sterujący znajduje się w prawym dolnym rogu panoramy. Możesz zmienić pozycję elementu sterującego, wpisując MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji o śledzeniu ruchu.
  • linksControl zawiera strzałki pomocnicze, które umożliwiają przechodzenie do sąsiednich zdjęć panoramicznych.
  • Element sterujący Zamknij umożliwia zamknięcie przeglądarki Street View. Aby włączyć lub wyłączyć element sterujący Zamknij, ustaw enableCloseButton na true lub false.

Poniższy przykład zmienia elementy sterujące wyświetlane w powiązanym widoku Street View i usuwa 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.
      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>
Zobacz przykład

Wypróbuj fragment

Bezpośredni dostęp do danych Street View

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

Prośby o usługę Street View

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

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

Żądanie korzystające z StreetViewPanoRequest zwraca dane panoramy z identyfikatorem referencyjnym, który jednoznacznie identyfikuje panoramę. Te identyfikatory referencyjne są stabilne tylko przez cały okres ważności zdjęć danej panoramy.

Żądanie korzystające z metody StreetViewLocationRequest wyszukuje dane z panoramy w określonej lokalizacji przy użyciu tych parametrów:

  • location określa lokalizację (szerokość i długość geograficzną), w której chcesz wyszukać panoramę.
  • preference określa, jaka panorama ma znajdować się w określonym promieniu: najbliższa danej lokalizacji lub najlepsza na danym obszarze.
  • radius ustawia promień podany w metrach, w którym chcesz wyszukać panoramę, wyśrodkowany na danej szerokości i długości geograficznej. Jeśli nie zostanie podana, domyślna wartość to 50.
  • source określa źródło panoram do przeszukania. Prawidłowe wartości to:
    • default korzysta z domyślnych źródeł Street View. Wyszukiwania nie są ograniczone do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji zewnętrznych. Pamiętaj, że w przypadku określonej lokalizacji panoramy zewnętrzne mogą nie być dostępne.

Odpowiedzi na pytania dotyczące Street View

Funkcja getPanorama() wymaga wywołania zwrotnego, aby była wykonywana 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 o panoramy Street View w takim formacie:

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

Zwróć uwagę, że ten obiekt danych nie jest obiektem StreetViewPanorama. Aby utworzyć obiekt Street View przy użyciu tych danych, musisz utworzyć obiekt StreetViewPanorama i wywołać metodę setPano(), która przekaże mu identyfikator, jak podano w zwróconym polu 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źć panoramy pasującej do spełnionych kryteriów.
  • UNKNOWN_ERROR oznacza, że nie udało się przetworzyć żądania Street View, ale dokładna przyczyna jest nieznana.

Podany niżej kod tworzy obiekt StreetViewService, który odpowiada na kliknięcie mapy przez użytkownika. W tym celu tworzą znaczniki, które po kliknięciu wyświetlają StreetViewPanorama z tej lokalizacji. Kod wykorzystuje zawartość StreetViewPanoramaData zwróconego przez usługę.

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.
      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>
Zobacz przykład

Wypróbuj fragment

Przesyłanie niestandardowych panoram Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama. Niestandardowe panoramy pozwalają wyświetlić wnętrze budynków, widoki z malowniczych miejsc i cokolwiek chcesz, według własnej wyobraźni. Możesz nawet połączyć te niestandardowe panoramy z istniejącymi panoramami Street View Google.

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

  • Utwórz podstawowe zdjęcie panoramiczne dla każdej niestandardowej panoramy. Powinien on być w najwyższej rozdzielczości, z którego ma być wyświetlany powiększony obraz.
  • (Opcjonalne, ale zalecane) Utwórz zestaw kafelków panoramicznych o różnych poziomach powiększenia z poziomu obrazu podstawowego.
  • Twórz połączenia między niestandardowymi panoramami.
  • (Opcjonalnie) Wskaż panoramy „wejściowe” na istniejących zdjęciach Street View Google i dostosuj linki do zdjęć niestandardowych ze zbioru standardowego.
  • Zdefiniuj metadane dla każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
  • Zaimplementuj metodę, która określa niestandardowe dane panoramy i obrazy oraz oznacz ją jako własną metodę obsługi w obiekcie StreetViewPanorama.

Wyjaśniamy ten proces w sekcjach poniżej.

Tworzenie niestandardowych panoram

Każda panorama Street View to zdjęcie lub zestaw zdjęć zrobionych w pełnym zakresie 360 stopni z jednego miejsca. Obiekt StreetViewPanorama korzysta z obrazów zgodnych z rzutem walcowym (Plate Carrée). Takie odwzorowanie obejmuje 360 stopni widoku w poziomie (pełne zawinięcie) i 180 stopni widoku pionowego (od góry do góry w dół). Te pola widoku danych tworzą obraz o współczynniku proporcji 2:1. Poniżej widoczna jest pełna panorama.

Panorama miasta

Ogólnie zdjęcia panoramiczne uzyskuje się, robiąc kilka zdjęć w jednym miejscu i łącząc je za pomocą oprogramowania do tworzenia panoram. (więcej informacji znajdziesz w artykule Porównanie aplikacji do łączenia zdjęć w Wikipedii). Powinny one znajdować się w jednym miejscu, z którego wykonywane są wszystkie panoramy. Utworzona w ten sposób panorama 360 stopni może zdefiniować rzutowanie na kulę z obrazem nałożonym na dwuwymiarową powierzchnię kuli.

Widok sferyczny z widokiem ulicy na jej powierzchni

Potraktowanie panoramy jako rzutu na sferę w prostoliniowym układzie współrzędnych jest korzystne przy podziale zdjęcia na prostokątne kafelki i wyświetlanie obrazów na podstawie obliczonych współrzędnych kafelków.

Tworzenie niestandardowych kafelków panoramy

Street View obsługuje też różne poziomy szczegółowości zdjęcia dzięki elementowi sterującemu powiększaniu, który umożliwia powiększanie i pomniejszanie widoku domyślnego. Ogólnie rzecz biorąc, Street View oferuje 5 poziomów rozdzielczości powiększenia dla każdego zdjęcia panoramicznego. Gdyby użytkownik używał jednego obrazu panoramicznego do obsługi wszystkich poziomów powiększenia, taki obraz musi być dość duży i znacznie spowalniać aplikację lub mieć tak niską rozdzielczość przy większym powiększeniu, że obraz z wyraźnym pikselowaniem się nie wyświetla. Na szczęście możemy skorzystać z podobnego wzoru stosowanego do wyświetlania kafelków mapy Google przy różnym powiększeniu, aby zapewnić odpowiednią rozdzielczość dla panoram na każdym poziomie powiększenia.

Gdy StreetViewPanorama wczytuje się po raz pierwszy, domyślnie wyświetla obraz składający się z 25% (90 stopni łuku) szerokości poziomej panoramy przy powiększeniu 1. Ten widok odpowiada mniej więcej zwykłym polu widzenia człowieka. Pomniejszenie „oddalenia” z tego widoku domyślnego powoduje zasadniczo szerszy łuk, a powiększanie zawęża pole widoku do mniejszego łuku. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera zdjęcia najlepiej pasujące do tej rozdzielczości, wybierając zestaw kafelków, który w przybliżeniu odpowiada wymiarom poziomego pola widzenia. Te pola widoku są zmapowane na poziomy powiększenia w 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 wyłącznie od rozmiaru ekranu (szerokość) kontenera Street View. Jeśli udostępnisz szerszy kontener, usługa nadal będzie zapewnić to samo pole widoku dla każdego poziomu powiększenia, ale może wybrać kafelki lepiej dopasowane do tej rozdzielczości.

Każda panorama składa się z odwzorowania walcowego równoodległościowego, więc tworzenie fragmentów panoramy jest stosunkowo łatwe. Ponieważ odwzorowanie ma proporcje 2:1, łatwiej jest używać kafelków o współczynniku proporcji 2:1. Jednak kwadratowe kafelki mogą sprawdzić się lepiej na kwadratowych mapach (ponieważ pole widzenia jest kwadratowe).

W przypadku kafelków w formacie 2:1 pojedynczy obraz obejmujący całą panoramę przedstawia cały świat (obraz podstawowy) przy powiększeniu 0, a każdy rosnący poziom powiększenia oferuje 4 kafelki zoomLevel. (np.przy powiększeniu 2. cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia w Street View nie odpowiadają bezpośrednio poziomom powiększenia określonemu w przypadku elementów sterujących Street View. Zamiast tego poziom powiększenia w Street View wybiera pole widoku, z którego wybierane są odpowiednie kafelki.

Panoramiczny widok ulicy miejskiej podzielonej na kafelki

Ogólnie rzecz biorąc, kafelki obrazów warto nazywać tak, aby można je było wybierać automatycznie. Taki schemat nazewnictwa został omówiony poniżej w artykule Obsługa żądań niestandardowych panoram.

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

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

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData jest obiektem tej formy:

{
  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 własną panoramę w następujący sposób:

Uwaga: nie ustawiaj bezpośrednio zdjęcia position w StreetViewPanorama, gdy chcesz wyświetlać niestandardowe panoramy, ponieważ takie ustawienie spowoduje, że usługa Street View zażąda domyślnych zdjęć Street View z okolicy tej lokalizacji. Zamiast tego ustaw tę pozycję w polu location.latLng niestandardowego obiektu StreetViewPanoramaData.

Poniższy przykład pokazuje niestandardową panoramę biura Google w Sydney. Pamiętaj, że w tym przykładzie nie użyto 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.
      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>
Zobacz przykład

Wypróbuj fragment

Dostawca niestandardowej panoramy zwraca odpowiedni kafelek z przekazanym identyfikatorem panoramy, poziomem powiększenia i współrzędnymi kafelka panoramy. Wybór obrazów zależy od przekazanych wartości, dlatego warto nadawać nazwy obrazom, które można wybrać automatycznie na podstawie przekazanych wartości, np. pano_zoom_tileX_tileY.png.

W poniższym przykładzie oprócz domyślnych strzałek nawigacyjnych Street View dodaliśmy kolejną strzałkę, która wskazuje Google Sydney i linki do własnych 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.
      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>
Zobacz przykład

Wypróbuj fragment