Usługa Street View

Omówienie

Wybierz platformę: Android iOS JavaScript

Google Street View pozwala oglądać panoramiczne zdjęcia dróg wyznaczonych na danym obszarze. Interfejs API Street View zasięg jest taki sam jak w przypadku aplikacji Mapy Google. (https://maps.google.com/). Obecnie na liście z miast, w których dostępna jest funkcja Street View, znajdziesz na Google Strona Map.

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


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

Wykorzystanie map Street View

Chociaż Street View można używać w samodzielnym elementem DOM, przydatne przy wskazywaniu lokalizacji na mapie. Domyślnie funkcja Street View to zostanie włączony na mapie i pojawi się element sterujący Pegmana w Street View zintegrowany z elementami sterującymi nawigacji (powiększanie i przesuwanie). Możesz to ukryć kontrolować w obszarze MapOptions mapy, ustawiając streetViewControl do false. Możesz także zmienić ustaw domyślną pozycję elementu sterującego Street View, ustawianie: streetViewControlOptions.position funkcji Map do nowej usługi ControlPosition.

Kontrolka Pegman w Street View umożliwia oglądanie Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, Mapy Google wyświetlają niebieskie kontury ulic z obsługą Street View, oferując interfejs podobny do aplikacji Mapy Google.

Gdy użytkownik upuści znacznik Pegmana na ulicę, mapa zmieni się na wyświetli panoramę wskazanego miejsca ze Street View.

Panoramy Street View

Zdjęcia Street View są obsługiwane przy użyciu Obiekt StreetViewPanorama udostępniający interfejs API za pomocą funkcji widoku Street View. Każda mapa zawiera domyślne panoramę Street View, którą można pobrać, wywołując metody getStreetView() mapy. Gdy dodasz zdjęcia Street View aby sterować mapą, ustawiając jego streetViewControl do true, automatycznie połączysz Pegmana tę domyślną panoramę Street View.

Możesz też tworzyć własne StreetViewPanorama i skonfiguruj mapę tak, aby używała go zamiast domyślnego, przez jawne ustawienie właściwości streetView mapy na który stworzył obiekt. Możesz chcieć zmienić panoramę domyślną jeśli chcesz zmienić domyślne działanie, takie jak udostępnianie nakładek między mapą a panoramą. (Zobacz nakładki w Street View poniżej).

Kontenery Street View

Możesz też wyświetlić StreetViewPanorama w osobnym elemencie DOM, często z elementem <div>. Po prostu przekaż element DOM w szablonie StreetViewPanorama za pomocą konstruktora. W celu uzyskania optymalnego wyświetlania obrazów zalecany minimalny rozmiar: 200 x 200 pikseli.

Uwaga: chociaż Street View który jest zaprojektowany do używania w połączeniu z mapą, nie jest wymagane. Możesz użyć samodzielnego obiektu Street View bez mapy.

Lokalizacje i punkty widzenia w Street View

Konstruktor StreetViewPanorama umożliwia też ustaw lokalizację i punkt widzenia Street View za pomocą StreetViewOptions. Możesz wywołać setPosition() i setPov() w obiekcie po aby zmienić jej lokalizację i punkt widzenia.

Lokalizacja w Street View określa, gdzie jest ustawiony aparat ale nie określa orientacji kamery. dla danego obrazu. Do tego celu obiekt StreetViewPov definiuje 2 właściwości:

  • heading (domyślnie 0) określa kąt obrotu wokół położenia kamery w stopniach w stosunku do rzeczywistej północy. Nagłówki to mierzona w prawo (90 stopni to rzeczywisty wschód).
  • pitch (domyślnie 0) określa wariancję kąta "góra" lub „w dół” od domyślnego tonu kamery, który często (ale nie zawsze) płasko w poziomie. (Na przykład zdjęcie zrobione na wzgórzu zostanie prawdopodobnie domyślne kąty nachylenia są inne niż poziome). Kąty nachylenia to mierzone przy użyciu wartości dodatnich, patrząc w górę (do +90 stopni w górę ortogonalny do domyślnego tonacji) i wartości ujemne (do -90) stopni prosto w dół i ortogonalnie do domyślnego tonacji).

Obiekt StreetViewPov jest najczęściej używany do określania z perspektywy aparatu Street View. Możesz też określić z perspektywy fotografa – zwykle w kierunku samochód lub trójkołowca – Metoda StreetViewPanorama.getPhotographerPov().

Poniższy kod wyświetla mapę Bostonu z początkowym widokiem Fenway. Park. Wybieranie Pegmana i przeciąganie go do obsługiwanej lokalizacji 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>

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

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

Zobacz próbkę

Śledzenie ruchu na urządzeniach mobilnych

Na urządzeniach, które obsługują zdarzenia orientacji urządzenia, interfejs API umożliwia użytkownikom możliwość zmiany punktu widzenia Street View na podstawie ruchu urządzenia. Użytkownicy mogą się rozglądać, poruszając urządzeniami. Nazywamy to ruchem śledzenia konwersji i ich rotacji.

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

  • Włącz lub wyłącz funkcję śledzenia ruchu. Domyślnie ruch śledzenie jest włączone na każdym urządzeniu, które obsługuje tę funkcję. Następująca próbka wyłącza śledzenie ruchu, ale pozostawia widoczne elementy sterujące śledzeniem ruchu. (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 to wyświetlane na urządzeniach obsługujących śledzenie ruchu. Użytkownik może kliknąć ikonę przycisk do włączania i wyłączania śledzenia ruchu. Pamiętaj, że element sterujący nigdy nie są wyświetlane, jeśli urządzenie nie obsługuje śledzenia ruchu, niezależnie od wartość motionTrackingControl.

    Poniższy przykład wyłącza zarówno śledzenie ruchu, elementu sterującego śledzeniem ruchu. W tym przypadku użytkownik nie może obracać kamery śledzenie:

    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false,
      motionTrackingControl: false
    });
  • Zmień domyślną pozycję elementu sterującego śledzeniem ruchu. Domyślnie element sterujący będzie widoczny w prawym dolnym rogu panoramy (położenie RIGHT_BOTTOM). Poniższy przykład ustawia pozycję element sterujący do lewej i do dołu: 
    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ć działanie śledzenia ruchu, wyświetl poniższy przykład na urządzeniu mobilnym urządzenie (lub dowolne urządzenie obsługujące zdarzenia orientacji urządzenia):


Zobacz przykład

Nakładki w Street View

Domyślny obiekt StreetViewPanorama obsługuje format natywny wyświetlanie mapy nakładki. Nakładki zazwyczaj są wyświetlane na poziomie ulicy. zakotwiczony na pozycji LatLng pozycji. (Znaczniki będą wyświetlane z przyczepami zakotwiczonymi w płaszczyznę poziomą na panoramie Street View).

Obecnie typy nakładek obsługiwanych w Street View panoramy mogą mieć maksymalnie Marker, InfoWindow s lub niestandardowe OverlayView. Nakładki wyświetlane na mapie mogą wyświetlane na panoramie Street View, traktując ją jako zamiennik dla obiektu Map, wywołując setMap() i przekazując argument StreetViewPanorama zamiast mapy. Informacje można w podobny sposób otwierać okna w ramach panoramy Street View, wywołując open(), przekazując StreetViewPanorama() zamiast mapę.

Dodatkowo podczas tworzenia mapy z domyślnym ustawieniem StreetViewPanorama, wszystkie znaczniki utworzone na mapie są udostępnione automatycznie z powiązaną z mapą panoramą Street View, pod warunkiem że widoczna jest panorama. Aby pobrać domyślną panoramę Street View, wywołaj getStreetView() na obiekcie Map. Pamiętaj, że jeśli jednoznacznie ustawić właściwość streetView mapy na StreetViewPanorama Twojej własnej konstrukcji, zastąpisz panoramę domyślną.

Na przykładzie poniżej przedstawiono znaczniki wskazujące różne lokalizacje wokół Astor Place, Nowy Jork. Przełącz wyświetlacz na Street View, by zobaczyć udostępniane znaczniki w StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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


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

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

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

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

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

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

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

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

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

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

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

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

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

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

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

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

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

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

window.initMap = initMap;
index.js

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>

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

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

Zobacz próbkę

Wydarzenia Street View

Podczas przechodzenia między Street View lub manipulowania orientację, możesz monitorować kilka zdarzeń wskazujących na to, zmienia stan elementu StreetViewPanorama:

  • Aplikacja pano_changed jest uruchamiana za każdym razem, gdy pojedyncza panorama Zmiany identyfikatora. To zdarzenie nie gwarantuje, że żadne powiązane dane w panorama (np. linki) również zmieniła się do czasu, gdy nadejdzie to wydarzenie jest inicjowany; to zdarzenie wskazuje jedynie, że panorama Identyfikator się zmienił. Zauważ, że identyfikator panoramy (który możesz wykorzystać do wskazywania tę panoramę) jest stabilna tylko podczas bieżącej sesji przeglądarki.
  • position_changed uruchamia się, gdy bazowy (LatLng) zmieni się położenie panoramy. Obrotowe Panorama nie będzie wywoływać tego zdarzenia. Pamiętaj, że możesz zmienić w swoim położeniu bez zmiany powiązanego ponieważ interfejs API automatycznie kojarzy najbliższe do pozycji panoramy.
  • Przycisk pov_changed jest uruchamiany za każdym razem, gdy kamera Street View Zmiany: StreetViewPov. Pamiętaj, że to zdarzenie może się uruchomić a położenie i identyfikator panoramy pozostają stabilne.
  • Przycisk links_changed jest uruchamiany za każdym razem, gdy kamera Street View czy linków. Pamiętaj, że to zdarzenie może być uruchamiane asynchronicznie po zmianę identyfikatora panoramy wskazanej w pano_changed.
  • Przycisk visible_changed jest uruchamiany za każdym razem, gdy kamera Street View zmiany widoczności. Pamiętaj, że to zdarzenie może być uruchamiane asynchronicznie po zmianę identyfikatora panoramy wskazanej w pano_changed.

Poniższy kod ilustruje, jak można obsługiwać te zdarzenia aby zebrać dane o źródle 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>

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

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

Zobacz próbkę

Elementy sterujące Street View

Przy wyświetlaniu danych „StreetViewPanorama” możesz uwzględnić różne są domyślnie wyświetlane na panoramie. Możesz włączyć lub wyłączyć tych ustawień, ustawiając odpowiednie pola w sekcji StreetViewPanoramaOptions do true lub false:

  • panControl umożliwia rotację panoramę. Ten element sterujący jest domyślnie wyświetlany jako standardowy zintegrowany kompas i przesuwania. Możesz zmienić pozycję elementu sterującego, podając PanControlOptions w panControlOptions.
  • zoomControl umożliwia powiększenie obrazu. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu panoramy. Możesz zmienić wygląd elementu sterującego, podając ZoomControlOptions w zoomControlOptions.
  • addressControl zawiera nakładkę tekstową wskazującą, adres powiązanej lokalizacji oraz zawiera link do jej otwarcia. lokalizację w Mapach Google. Możesz zmienić wygląd elementu sterującego, podając StreetViewAddressControlOptions w addressControlOptions.
  • fullscreenControl umożliwia otwarcie Street View w trybie pełnoekranowym. Możesz zmienić wygląd elementu sterującego, podając FullscreenControlOptions w fullscreenControlOptions.
  • motionTrackingControl umożliwia włączenie lub wyłączyć śledzenie ruchu na urządzeniach mobilnych. Ten element sterujący jest widoczny tylko na urządzeniach, które obsługują zdarzenia orientacji urządzenia. Domyślnie element sterujący w prawym dolnym rogu panoramy. Możesz zmienić pozycji, podając MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji dotyczącej ruchu .
  • linksControl zawiera strzałki wskazujące na obrazie dla: podróży do sąsiednich zdjęć panoramicznych.
  • Element sterujący Zamknij umożliwia użytkownikowi zamknięcie przeglądarki Street View. Dostępne opcje włącz lub wyłącz kontrolkę zamykania według ustawienia enableCloseButton do: true lub false.

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

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

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

Zobacz próbkę

Bezpośredni dostęp do danych Street View

Możesz automatycznie określić dostępność danych ze Street View oraz zwrócenie informacji o poszczególnych panoramach, bez konieczności bezpośredniego manipulowania mapą lub panoramą. Możesz to zrobić za pomocą obiektu StreetViewService, który udostępnia interfejsu do danych przechowywanych w usłudze Google Street View.

Żądania usług Street View

Dostęp do usługi Street View jest asynchroniczny, ponieważ interfejs API Map Google musi nawiązać połączenie z serwerem zewnętrznym. Dlatego musisz zdać metodę wywołania zwrotnego, która ma być wykonywana po zakończeniu żądania. Ten metoda wywołania zwrotnego przetwarza wynik.

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

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

Żądanie na podstawie zapytania StreetViewLocationRequest wyszukuje dane panoramy w określonej lokalizacji przy użyciu następujących parametrów:

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

Odpowiedzi usługi Street View

Funkcja getPanorama() wymaga funkcji wywołania zwrotnego do wykonania po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zbiór dane panoramy w obiekcie StreetViewPanoramaData oraz Kod StreetViewStatus, który wskazuje stan żądania, w to zamówienie.

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane mają format następujący:

{
  "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 typu StreetViewPanorama obiektu. Aby utworzyć obiekt Street View na podstawie tych danych, musisz utworzyć StreetViewPanorama i wywołać setPano(), przekazując mu identyfikator zgodny ze zw. location.pano.

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

  • OK oznacza, że usługa znalazła pasującą panoramę.
  • ZERO_RESULTS oznacza, że usługa nie znalazła odpowiedzi panoramę spełniającą kryteria.
  • UNKNOWN_ERROR oznacza, że żądanie Street View nie udało się przetworzyć, chociaż dokładny powód jest nieznany.

Ten kod tworzy StreetViewService reakcji na kliknięcie mapy przez użytkownika, tworząc znaczniki, które po kliknięciu wyświetli się StreetViewPanorama lokalizacji. Kod wykorzystuje zawartość pola StreetViewPanoramaData zwróconych 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;
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>

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

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

Zobacz próbkę

Tworzenie niestandardowych panoram Street View

Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama. Korzystam z niestandardowych można wyświetlić wnętrze budynków, widoki z w malowniczych miejscach czy wedle dowolnej wyobraźni. Możesz nawet połączyć te niestandardowe panoramy z istniejącymi panoramami Google i panoramy.

Aby skonfigurować zestaw własnych zdjęć panoramicznych, następujące kroki:

  • Utwórz podstawowy obraz panoramiczny dla każdej panoramy niestandardowej. Ten obraz podstawowy powinien być w najwyższej rozdzielczości, chcesz wyświetlać powiększone zdjęcia.
  • (Opcjonalne, ale zalecane) Tworzenie zestawu kafelków panoramicznych przy różnym powiększeniu niż zdjęcie podstawowe.
  • Twórz połączenia między niestandardowymi panoramami.
  • (Opcjonalnie) Oznacz „wpis” panoramy w obrębie Istniejące zdjęcia Street View od Google i dostosowywać linki ze zbioru niestandardowego do zestawu standardowego.
  • Określ metadane dla każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
  • Zaimplementuj metodę określania panoramy niestandardowej oraz dane i obrazy, a następnie wyznacz tę metodę jako niestandardowy moduł obsługi w obiekcie StreetViewPanorama.

Wyjaśniamy to w sekcjach poniżej.

Tworzenie niestandardowych panoram

Każda panorama Street View jest obrazem lub zestawem zdjęć który zapewnia pełny widok 360 stopni z jednego miejsca. Obiekt StreetViewPanorama wykorzystuje obrazy zgodne z walcem równoodległościowym (Plata Carrée). Takie rzutowanie obejmuje 360 stopni widoku poziomego (pełne zawinięcie) i 180 stopni w widoku pionowym (od prostej do prawej). Te pola otrzymuje obraz o współczynniku proporcji 2:1. O poniżej widać panoramę zawijaną przez cały czas.

Panoramiczna ulica w mieście

Zdjęcia panoramiczne uzyskuje się zwykle, robiąc kilka zdjęcia z jednego miejsca i łączenie ich za pomocą do tworzenia zdjęć panoramicznych. (Zobacz następujące strony: Wikipedia: Porównanie aplikacji do łączenia zdjęć). Takie zdjęcia powinny mieć wspólny „aparat fotograficzny” locus, z którego wykonano poszczególne zdjęcia do panoram. dzięki czemu można utworzyć odwzorowanie na poziomie 360 stopni. kulę z obrazem nałożonym na dwuwymiarową powierzchnię od strony kuli ziemskiej.

Kula z panoramicznym widokiem na ulicę na jej powierzchni

Działanie panoramicznej panoramy jako odwzorowywania kuli z wykorzystaniem prostolinii przy dzieleniu obrazu na układ współrzędnych prostokątne kafelki i wyświetlanie obrazów na podstawie obliczonych płytek. .

Tworzenie niestandardowych kafelków panoramy

Street View obsługuje również różne poziomy szczegółowości zdjęć, użyj elementu sterującego powiększeniem, które umożliwiają powiększanie i pomniejszanie widok domyślny. Street View zapewnia pięć rodzajów zdjęć, rozdzielczości powiększenia poszczególnych zdjęć panoramicznych. Jeśli masz używać pojedynczego obrazu panoramicznego do wyświetlania wszystkich poziomów powiększenia, np. obrazu może być dość duży i spowolnić aplikacji lub mieć tak niską rozdzielczość przy większym powiększeniu. że będzie to obraz ze słabą pikselizacją. Na szczęście możemy podobnego wzorca w celu wyświetlania reklam, kafelki mapy Google na różnych poziomach powiększenia, odpowiednią rozdzielczość zdjęć panoramicznych przy każdym poziomie powiększenia.

Domyślnie przy pierwszym wczytaniu tagu StreetViewPanorama pojawia się obraz składający się z 25% (90 stopni łuku) i ustaw szerokość obrazu w poziomie przy powiększeniu 1. Ten widok odpowiada polu widzenia normalnego człowieka. Powiększanie „wychodzące” z tego domyślnego widoku, tworzy większy łuk, a powiększanie zawęża pole widzenia do mniejszego łuku. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera zdjęcia najbardziej odpowiednie do tej rozdzielczości. W tym celu kliknij zestaw kafelków, który mniej więcej odpowiada wymiarom linii poziomej pole widzenia. Poniższe pola widoku są mapowane na widok Street View poziomy powiększenia:

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

Pamiętaj, że rozmiar zdjęcia wyświetlanego w Street View wynosi zależy od rozmiaru ekranu (szerokość) widoku Street View. kontenera. Jeśli zapewnisz szerszy kontener, usługa nadal będą zapewniać to samo pole widzenia poziom powiększenia, chociaż może wybrać bardziej odpowiednie kafelki dla tego rozwiązania.

Każda panorama składa się z odwzorowania walcowego równoodległościowego, jest stosunkowo proste. W przypadku prognozy udostępnia obraz o współczynniku proporcji 2:1, kafelki o proporcjach 2:1 są łatwiejsze w użyciu, chociaż kwadratowe kafelki mogą zapewnić większą skuteczność na mapach kwadratowych (ponieważ pole widzenia jest kwadratowe).

w przypadku kafelków w formacie 2:1 jeden obraz obejmujący całą panoramę reprezentuje cały „świat” panoramy. (obraz podstawowy) przy powiększeniu lub poziom 0, a każda opcja z rosnącym poziomem powiększenia 4 kafelkizoomLevel. (np. powiększenie 2, cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia w Street View kafelki nie pasują bezpośrednio do poziomów powiększenia określonych za pomocą funkcji element sterujący Street View; zamiast tego użyj sterowania powiększeniem w Street View. a następnie wybierz pole widzenia (FoV), z którego kafelki.

Widok panoramy ulicy podzielonej na kafelki w mieście

Zasadniczo warto nadać nazwy kafelkom obrazów, automatycznie. Taki schemat nazewnictwa to omówione poniżej w sekcji Obsługa niestandardowych ustawień Prośby dotyczące panoramy.

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

Aby użyć panoramy niestandardowej, wywołaj StreetViewPanorama.registerPanoProvider(), podając nazwę metody dostawcy zdjęć panoramicznych. Dostawca panoramy musi zwracać obiekt StreetViewPanoramaData i zawiera wartość ten podpis:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData jest obiektem następujących elementów formularz:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

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

  • Ustaw parametr StreetViewPanoramaOptions.pano na wartość niestandardową.
  • Zadzwoń do nas StreetViewPanorama.registerPanoProvider() , by udostępnić niestandardową funkcję dostawcy zdjęć panoramicznych.
  • Zaimplementuj własną funkcję dostawcy zdjęć panoramicznych do obsługi określono wartość pano.
  • Utwórz StreetViewPanoramaData obiektu.
  • Ustaw parametr StreetViewTileData.getTileUrl na nazwę podanej przez Ciebie funkcji dostawcy kafelków. Dla: przykład: getCustomPanoramaTileUrl.
  • Zaimplementuj niestandardową funkcję dostawcy kafelków, tak jak pokazano w przykładach poniżej.
  • Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio wartości position na urządzeniu StreetViewPanorama, gdy chcesz wyświetlić możesz utworzyć własne panoramy, takie położenie wskaże Wyświetl usługę, aby poprosić o zamknięcie domyślnych zdjęć Street View do tej lokalizacji. Zamiast tego ustaw tę pozycję w sekcji niestandardowego obiektu StreetViewPanoramaData location.latLng.

Następujący przykład przedstawia niestandardową panoramę Google Sydney w biurze. W tym przykładzie nie ma mapy ani domyślnego widoku Street View zdjęcia:

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>

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

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

Zobacz próbkę

Dostawca niestandardowej panoramy zwraca odpowiedni kafelek przekazywanego identyfikatora, poziomu powiększenia i współrzędnych kafelka panoramy. Dobór zdjęć zależy od przekazywanych wartości, więc jest on przydatny nadawania nazw obrazom, które można wybierać automatycznie na podstawie przekazywane wartości, takie jak pano_zoom_tileX_tileY.png

Poniższy przykład dodaje do obrazu kolejną strzałkę, oprócz domyślne strzałki nawigacyjne Street View, wskazujące Google Sydney i linki 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", // The ID for this custom panorama.
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: outsideGoogle.location.pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (pano, zoom, tileX, tileY) {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

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

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

window.initMap = initMap;
index.js

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>

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

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

Zobacz próbkę