Usługa Street View

Przegląd

Wybierz platformę: Android iOS JavaScript

Zobacz też dokumentację Maps JavaScript API: Renderowanie, Usługa)

Google Street View udostępnia panoramiczne widoki 360° z wyznaczonych dróg na całym obszarze objętym usługą. 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 dostępna jest usługa Street View, znajduje się na stronie Map Google.

Uwaga: zdjęcia Street View pochodzą z 2 źródeł: Google (niepubliczne zdjęcia kontrolowane przez deweloperów) i użytkownicy (treści generowane przez użytkowników). Pamiętaj, że nie ma możliwości korzystania tylko z jednego źródła zdjęć Street View. Dowiedz się więcej o naszej polityce prywatności dotyczącej zdjęć Street View.

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

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 manipulowanie nimi. Ta usługa Street View jest obsługiwana natywnie w przeglądarce.

Korzystanie z mapy Street View

Chociaż Street View można używać w samodzielnym elemencie DOM, jest on najbardziej przydatny do wskazywania lokalizacji na mapie. Domyślnie Street View jest włączony na mapie, a element sterujący Pegman jest zintegrowany z elementami sterującymi nawigacją (powiększanie i przesuwanie). Możesz ukryć ten element sterujący w MapOptions mapy, ustawiając streetViewControl na false. Możesz też zmienić domyślne położenie elementu sterującego Street View, ustawiając właściwość Map obiektu streetViewControlOptions.position na nową wartość ControlPosition.

Element sterujący Pegman w Street View umożliwia wyświetlanie panoram Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zaktualizuje się, wyświetlając niebieskie kontury wokół ulic z dostępną funkcją Street View, co zapewni wrażenia podobne do tych w aplikacji Mapy Google.

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

Panoramy Street View

Uwaga: opłaty są naliczane tylko za panoramy Street View wygenerowane za pomocą obiektu StreetViewPanorama. Wbudowana funkcja Street View oparta na kontrolce Pegman Street View i StreetViewService nie są rozliczane. Więcej informacji znajdziesz w sekcji Ceny.

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

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

Kontenery Street View

Zamiast tego możesz wyświetlić element StreetViewPanorama w osobnym elemencie DOM, często w elemencie <div>. Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama. Aby uzyskać optymalne wyświetlanie obrazów, zalecamy rozmiar co najmniej 200 x 200 pikseli.

Uwaga: funkcja Widoku ulicy jest przeznaczona do używania w połączeniu z mapą, ale nie jest to wymagane. Możesz używać samodzielnego obiektu Street View bez mapy.

Lokalizacje Street View i punkt widzenia

Konstruktor StreetViewPanorama umożliwia też ustawienie lokalizacji Street View i punktu widzenia za pomocą parametru StreetViewOptions. Po zakończeniu budowy możesz zadzwonić pod numery setPosition() i setPov(), aby zmienić lokalizację i punkt widzenia obiektu.

Lokalizacja Street View określa umiejscowienie ostrości kamery na zdjęciu, ale nie określa orientacji kamery na tym zdjęciu. W tym celu obiekt StreetViewPov definiuje 2 właściwości:

• heading (domyślnie 0) określa kąt obrotu wokół punktu kamery w stopniach względem północy geograficznej. Kierunki są mierzone zgodnie z ruchem wskazówek zegara (90 stopni to kierunek wschodni).
• pitch (domyślnie 0) określa odchylenie kąta „w górę” lub „w dół” od początkowego domyślnego kąta nachylenia kamery, który często (ale nie zawsze) jest płaski i poziomy. (Na przykład zdjęcie zrobione na wzgórzu prawdopodobnie będzie miało domyślne nachylenie, które nie jest poziome). Kąty pochylenia są mierzone z wartościami dodatnimi skierowanymi w górę (do +90 stopni w górę i prostopadle do domyślnego pochylenia) i wartościami ujemnymi skierowanymi w dół (do -90 stopni w dół i prostopadle do domyślnego pochylenia).

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

Poniższy kod wyświetla mapę Bostonu z początkowym widokiem na 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;
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell

Śledzenie ruchu na urządzeniach mobilnych

Na urządzeniach obsługujących zdarzenia związane z orientacją urządzenia interfejs API umożliwia użytkownikom zmianę punktu widzenia w Street View na podstawie ruchu urządzenia. Użytkownicy mogą się rozglądać, poruszając urządzeniami. Jest to tzw. śledzenie ruchu lub śledzenie obrotu urządzenia.

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

• Włącz lub wyłącz funkcję śledzenia ruchu. Domyślnie śledzenie ruchu jest włączone na każdym urządzeniu, które je obsługuje. W przykładzie poniżej wyłączamy śledzenie ruchu, ale pozostawiamy widoczny element sterujący ś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
      });

• Ukrywanie lub wyświetlanie elementu sterującego śledzeniem ruchu. Domyślnie element sterujący jest wyświetlany na urządzeniach, które obsługują śledzenie ruchu. Użytkownik może włączyć lub wyłączyć śledzenie ruchu, klikając element sterujący. Pamiętaj, że element sterujący nigdy nie pojawi się, jeśli urządzenie nie obsługuje śledzenia ruchu, niezależnie od wartości motionTrackingControl.

  Poniższy przykład wyłącza zarówno śledzenie ruchu, jak i kontrolkę śledzenia ruchu. W takim przypadku użytkownik nie może włączyć śledzenia ruchu:

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

• zmienić domyślne położenie elementu sterującego śledzeniem ruchu; Domyślnie element sterujący pojawia się w prawym dolnym rogu panoramy (pozycja RIGHT_BOTTOM). Poniższy przykład ustawia pozycję elementu sterującego w lewym dolnym rogu:

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

Aby zobaczyć śledzenie ruchu w działaniu, wyświetl ten przykład na urządzeniu mobilnym (lub dowolnym urządzeniu obsługującym zdarzenia związane z orientacją urządzenia):

Zobacz przykład

Nakładki w Street View

Domyślny obiekt StreetViewPanorama obsługuje natywne wyświetlanie nakładek na mapie. Nakładki zwykle pojawiają się na „poziomie ulicy” i są zakotwiczone w LatLng pozycjach. (Znaczniki będą wyświetlane z końcówkami umieszczonymi na płaszczyźnie poziomej lokalizacji w panoramie Street View).

Obecnie w panoramach Street View obsługiwane są tylko te typy nakładek: Marker, InfoWindow i niestandardowe OverlayView. Nakładki wyświetlane na mapie mogą być wyświetlane na panoramie Street View, jeśli potraktujesz panoramę jako zamiennik obiektu Map, wywołasz funkcję setMap() i przekażesz argument StreetViewPanorama zamiast mapy. Podobnie okna informacyjne można otwierać w panoramie Street View, wywołując funkcję open() i przekazując do niej obiekt StreetViewPanorama() zamiast mapy.

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

W przykładzie poniżej widać znaczniki oznaczające różne miejsca w okolicach Astor Place w Nowym Jorku. Przełącz widok na Street View, aby wyświetlić udostępnione znaczniki w StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;
let innerMap: google.maps.Map;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    innerMap = mapElement.innerMap;

    document
        .getElementById('streetview-toggle-button')!
        .addEventListener('click', toggleStreetView);

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;

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

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

    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        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 = innerMap.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);
    }
}

initMap();
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

JavaScript

let panorama;
let innerMap;
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };
    const mapElement = document.querySelector('gmp-map');
    innerMap = mapElement.innerMap;
    document
        .getElementById('streetview-toggle-button')
        .addEventListener('click', toggleStreetView);
    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;
    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;
    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;
    // Set up the markers on the map
    const cafeMarker = new google.maps.Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });
    const bankMarker = new google.maps.Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });
    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        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 = innerMap.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);
    }
}
initMap();
export {};
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;
}

#streetview-toggle-button {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: none;
  background: white;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px 0px 10px -2px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgb(86, 86, 86);
}

#streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}
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>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18">
            <input type="button" value="Toggle Street View" id="streetview-toggle-button" slot="control-block-start-inline-start" />
        </gmp-map>
    </body>
</html>
index.html

Zobacz przykład

Wypróbuj

JSFiddle.net

Wydarzenia w Street View

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

• pano_changed jest wywoływane za każdym razem, gdy zmieni się identyfikator pojedynczej panoramy. To zdarzenie nie gwarantuje, że powiązane z panoramą dane (np. linki) również uległy zmianie w momencie jego wywołania. Wskazuje ono jedynie, że zmienił się identyfikator panoramy. Pamiętaj, że identyfikator panoramy (którego możesz użyć do odwołania się do tej panoramy) jest stabilny tylko w ramach bieżącej sesji przeglądarki.
• position_changed jest wywoływane za każdym razem, gdy zmieni się podstawowa (LatLng) pozycja panoramy. Obracanie panoramy nie spowoduje wywołania tego zdarzenia. Pamiętaj, że możesz zmienić podstawową pozycję panoramy bez zmiany powiązanego identyfikatora panoramy, ponieważ interfejs API automatycznie powiąże najbliższy identyfikator panoramy z pozycją panoramy.
• pov_changed jest wywoływane za każdym razem, gdy zmieni się StreetViewPov w Street View. Pamiętaj, że to zdarzenie może się uruchomić, gdy pozycja i identyfikator panoramy pozostają niezmienione.
• links_changed jest wywoływane za każdym razem, gdy zmieniają się linki do Street View. Pamiętaj, że to zdarzenie może zostać uruchomione asynchronicznie po zmianie identyfikatora panoramy, co jest sygnalizowane przez pano_changed.
• visible_changed jest wywoływane, gdy zmienia się widoczność usługi Street View. Pamiętaj, że to zdarzenie może zostać uruchomione asynchronicznie po zmianie identyfikatora panoramy, co jest sygnalizowane przez pano_changed.

Poniższy kod pokazuje, jak 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;
index.ts

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell

Sterowanie Street View

Podczas wyświetlania StreetViewPanorama na panoramie 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:

• Przycisk panControl umożliwia obracanie panoramy. Domyślnie jest to standardowy zintegrowany kompas i element sterujący panoramowaniem. Możesz zmienić położenie elementu sterującego, podając wartość PanControlOptions w polu panControlOptions.
• zoomControl umożliwia powiększanie obrazu. Ten element sterujący domyślnie pojawia się w prawym dolnym rogu panoramy. Wygląd elementu sterującego możesz zmienić, podając wartość ZoomControlOptions w polu zoomControlOptions.
• addressControl zawiera nakładkę tekstową z adresem powiązanej lokalizacji i linkiem do otwarcia tej lokalizacji w Mapach Google. Wygląd elementu sterującego możesz zmienić, podając wartość StreetViewAddressControlOptions w polu addressControlOptions.
• fullscreenControl umożliwia otwarcie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, podając wartość FullscreenControlOptions w polu fullscreenControlOptions.
• motionTrackingControl umożliwia włączenie lub wyłączenie śledzenia ruchu na urządzeniach mobilnych. Ta opcja jest widoczna tylko na urządzeniach obsługujących zdarzenia związane z orientacją urządzenia. Domyślnie element sterujący jest wyświetlany w prawym dolnym rogu panoramy. Możesz zmienić położenie elementu sterującego, podając wartość MotionTrackingControlOptions. Więcej informacji znajdziesz w sekcji dotyczącej śledzenia ruchu.
• Ikona linksControl zawiera strzałki wskazujące kierunek, w którym należy się poruszać, aby przejść do sąsiednich panoram.
• Przycisk Zamknij umożliwia użytkownikowi zamknięcie przeglądarki Street View. Możesz włączyć lub wyłączyć przycisk zamknięcia, ustawiając wartość enableCloseButton na true lub false.

Poniższy przykład zmienia elementy sterujące wyświetlane w powiązanym widoku Street View i usuwa linki do widoku:

TypeScript

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

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell

Bezpośredni dostęp do danych Street View

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

Prośby o usługi Street View

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

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

Żądanie z użyciem parametru StreetViewPanoRequest zwraca dane panoramy na podstawie identyfikatora referencyjnego, który jednoznacznie identyfikuje panoramę. Pamiętaj, że te identyfikatory referencyjne są stabilne tylko przez cały okres istnienia zdjęć tej panoramy.

Żądanie z użyciem parametru StreetViewLocationRequest wyszukuje dane panoramy w określonej lokalizacji, korzystając z tych parametrów:

• location określa lokalizację (szerokość i długość geograficzną), w której ma zostać wyszukana panorama.
• preference określa, która panorama powinna zostać znaleziona w promieniu: najbliższa podanej lokalizacji czy najlepsza w promieniu.
• radius ustawia promień (w metrach), w którym ma być wyszukiwana panorama, wyśrodkowany na podanej szerokości i długości geograficznej. Jeśli nie zostanie podana, domyślna wartość to 50.
• source określa źródło panoram, w którym ma zostać przeprowadzone wyszukiwanie. 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 panoramy zewnętrzne mogą nie istnieć w przypadku określonej lokalizacji.

Odpowiedzi usługi Street View

Funkcja getPanorama() potrzebuje funkcji wywołania zwrotnego, która zostanie wykonana po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zestaw danych panoramy w obiekcie StreetViewPanoramaData i kod StreetViewStatus oznaczający stan żądania w tej kolejności.

Specyfikacja obiektu StreetViewPanoramaData zawiera metadane dotyczące panoramy Street View w tej postaci:

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

Pamiętaj, że ten obiekt danych nie jest samym obiektem StreetViewPanorama. Aby utworzyć obiekt Street View na podstawie tych danych, musisz utworzyć StreetViewPanorama i wywołać setPano(), przekazując mu identyfikator podany w zwróconym polu location.pano.

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

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

Poniższy kod tworzy StreetViewService, który reaguje na kliknięcia użytkownika na mapie, tworząc znaczniki, które po kliknięciu wyświetlają StreetViewPanorama tej lokalizacji. Kod używa zawartości StreetViewPanoramaData zwróconej 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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell

Dostarczanie niestandardowych panoram Street View

Interfejs Maps JavaScript API obsługuje wyświetlanie panoram niestandardowych w obiekcie StreetViewPanorama. Za pomocą niestandardowych panoram możesz wyświetlać wnętrza budynków, widoki z malowniczych miejsc lub wszystko, co podpowie Ci wyobraźnia. Możesz nawet połączyć te niestandardowe panoramy z istniejącymi panoramami Street View w Google.

Konfigurowanie zestawu niestandardowych zdjęć panoramicznych obejmuje te czynności:

• Utwórz podstawowy obraz panoramiczny dla każdej niestandardowej panoramy. Ten obraz bazowy powinien mieć najwyższą rozdzielczość, w jakiej chcesz wyświetlać powiększone zdjęcia.
• (Opcjonalne, ale zalecane) Utwórz zestaw panoramicznych kafelków na różnych poziomach powiększenia z obrazu podstawowego.
• Twórz linki między panoramami niestandardowymi.
• (Opcjonalnie) Wyznacz panoramy „wejściowe” w ramach istniejących zdjęć Street View od Google i dostosuj linki do/z niestandardowego zestawu do standardowego zestawu.
• Zdefiniuj metadane dla każdego obrazu panoramicznego w obiekcie StreetViewPanoramaData.
• Zaimplementuj metodę, która określa niestandardowe dane i obrazy panoramy, i wyznacz ją jako niestandardowy moduł obsługi w obiekcie StreetViewPanorama.

Proces ten opisano w sekcjach poniżej.

Tworzenie panoram niestandardowych

Każda panorama Street View to obraz lub zestaw obrazów, który zapewnia pełny widok 360 stopni z jednej lokalizacji. Obiekt StreetViewPanorama wykorzystuje obrazy zgodne z projekcją równopowierzchniową (Plate Carrée). Taka projekcja obejmuje 360 stopni widoku poziomego (pełny widok dookoła) i 180 stopni widoku pionowego (od góry do dołu). Te pola widzenia dają obraz o współczynniku proporcji 2:1. Poniżej znajduje się pełna panorama 360°.

Zdjęcia panoramiczne są zwykle uzyskiwane przez zrobienie kilku zdjęć z jednej pozycji i połączenie ich za pomocą oprogramowania do tworzenia panoram. (Więcej informacji znajdziesz w artykule Comparison of photo stitching applications w Wikipedii). Takie obrazy powinny mieć jeden punkt „kamery”, z którego wykonano wszystkie zdjęcia panoramiczne. Powstała panorama 360 stopni może następnie określać projekcję na sferze, na której obraz jest owinięty na dwuwymiarowej powierzchni.

Traktowanie panoramy jako projekcji na sferę z prostokątnym układem współrzędnych jest korzystne podczas dzielenia obrazu na prostokątne kafelki i wyświetlania 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 obrazu dzięki funkcji powiększania, która umożliwia powiększanie i pomniejszanie widoku domyślnego. Zwykle Street View udostępnia 5 poziomów rozdzielczości powiększenia dla każdego zdjęcia panoramicznego. Jeśli do obsługi wszystkich poziomów powiększenia użyjesz jednego obrazu panoramicznego, będzie on musiał być dość duży, co znacznie spowolni działanie aplikacji, lub będzie miał tak niską rozdzielczość przy większych poziomach powiększenia, że wyświetli się jako obraz o słabej jakości. Na szczęście możemy jednak użyć podobnego wzorca projektowego, który służy do wyświetlania płytek map Google na różnych poziomach powiększenia, aby zapewnić obrazy o odpowiedniej rozdzielczości 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) poziomej szerokości panoramy przy poziomie powiększenia 1. Ten widok odpowiada w przybliżeniu normalnemu polu widzenia człowieka. Oddalenie widoku domyślnego powoduje zwiększenie łuku, a przybliżenie – zmniejszenie pola widzenia do mniejszego łuku. StreetViewPanorama automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera obrazy najbardziej odpowiednie dla tej rozdzielczości, wybierając zestaw kafelków, który w przybliżeniu odpowiada wymiarom poziomego pola widzenia. Pola widzenia odpowiadają tym poziomom 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 obrazu wyświetlanego w Street View zależy całkowicie od rozmiaru (szerokości) kontenera Street View. Jeśli podasz szerszy kontener, usługa nadal będzie zapewniać to samo pole widzenia przy dowolnym poziomie powiększenia, ale może wybierać kafelki bardziej odpowiednie dla tej rozdzielczości.

Każda panorama składa się z projekcji równokątnej, więc tworzenie kafelków panoramy jest stosunkowo łatwe. Projekcja zapewnia obraz o proporcjach 2:1, więc łatwiej jest używać kafelków o takich proporcjach. Jednak na mapach kwadratowych lepsze wyniki mogą dawać kafelki kwadratowe (ponieważ pole widzenia będzie kwadratowe).

W przypadku kafelków 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje całą panoramę „świat” (obraz podstawowy) na poziomie powiększenia 0, a każdy kolejny poziom powiększenia oferuje 4^zoomLevel kafelki. (np. przy poziomie powiększenia 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 w kontrolce Street View. Zamiast tego poziomy powiększenia w kontrolce Street View wybierają pole widzenia (FoV), z którego wybierane są odpowiednie kafelki.

Zazwyczaj warto nadawać kafelkom obrazów nazwy, aby można było je wybierać programowo. Taki schemat nazewnictwa został omówiony poniżej w sekcji Obsługa niestandardowych żądań dotyczących panoramy.

Obsługa niestandardowych próśb o panoramę

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

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData to obiekt w tej postaci:

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

Aby wyświetlić niestandardową panoramę:

• Ustaw właściwość StreetViewPanoramaOptions.pano na wartość niestandardową.
• Wywołaj funkcję StreetViewPanorama.registerPanoProvider() , aby podać niestandardową funkcję dostawcy panoram.
• Zaimplementuj niestandardową funkcję dostawcy panoram, aby obsługiwać określoną wartość pano.
• Utwórz obiekt StreetViewPanoramaData.
• Ustaw właściwość StreetViewTileData.getTileUrl na nazwę funkcji niestandardowego dostawcy kafelków, którą podajesz. Na przykład: getCustomPanoramaTileUrl.
• Zaimplementuj funkcję niestandardowego dostawcy kafelków, jak pokazano w przykładach poniżej.
• Zwraca obiekt StreetViewPanoramaData.

Uwaga: nie ustawiaj bezpośrednio wartości position na obiekcie StreetViewPanorama, jeśli chcesz wyświetlać panoramy niestandardowe, ponieważ taka pozycja spowoduje, że usługa Street View poprosi o domyślne zdjęcia Street View w pobliżu tej lokalizacji. Zamiast tego ustaw tę pozycję w polu StreetViewPanoramaData obiektu niestandardowegolocation.latLng.

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

TypeScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell

Niestandardowy dostawca panoram zwraca odpowiedni kafelek na podstawie przekazanego identyfikatora panoramy, poziomu powiększenia i współrzędnych kafelka panoramy. Ponieważ wybór obrazu zależy od tych przekazywanych wartości, warto nadawać nazwy obrazom, które można wybrać programowo na podstawie tych przekazywanych wartości, np. pano_zoom_tileX_tileY.png.

W tym przykładzie do obrazu dodano kolejną strzałkę, która wskazuje Google Sydney i zawiera link do niestandardowych zdjęć. Oprócz niej na obrazie znajdują się domyślne strzałki nawigacyjne Street View:

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

Uwaga: przeczytaj przewodnik po korzystaniu z TypeScriptu i Map Google.

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

Uwaga: kod JavaScript jest kompilowany z fragmentu kodu TypeScript.

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

Wypróbuj

JSFiddle.net Google Cloud Shell