Przegląd
Google Street View udostępnia panoramiczne widoki z wyznaczonych dróg w okolicy obejmujące cały obszar. Zasięg interfejsu Street View API jest taki sam jak w przypadku aplikacji Mapy Google (https://maps.google.com/
). Lista obecnie obsługiwanych miast dla Street View jest dostępna na stronie Map Google.
Przykładowe zdjęcie Street View znajdziesz poniżej.
Interfejs Maps JavaScript API udostępnia usługę Street View do pobierania zdjęć i manipulowania nimi w Street View. Ta usługa Street View jest obsługiwana natywnie w przeglądarce.
Korzystanie z mapy Street View
Chociaż Street View można używać w samodzielnym elemencie DOM, jest najbardziej przydatny przy określaniu lokalizacji na mapie. Domyślnie funkcja Street View jest włączona na mapie, a przy korzystaniu z elementów sterujących nawigacją (powiększaniem i przesuwaniem) może być widoczna opcja Pegmana. Możesz ukryć ten element sterujący w MapOptions
na mapie, ustawiając streetViewControl
na false
. Możesz też zmienić domyślną pozycję elementu sterującego Street View, ustawiając we właściwości streetViewControlOptions.position
obiektu Map
nową wartość ControlPosition
.
Element sterujący Pegmanem Street View pozwala wyświetlać panoramy Street View bezpośrednio na mapie. Gdy użytkownik kliknie i przytrzyma Pegmana, mapa zostanie zaktualizowana, aby na mapie pojawią się niebieskie kontury wokół ulic obsługujących Street View. Korzystanie z aplikacji jest podobne do w aplikacji Mapy Google.
Gdy użytkownik upuści znacznik Pegmana na ulicę, mapa zostanie zaktualizowana, by wyświetlić panoramę Street View wskazanej lokalizacji.
Panoramy Street View
Obrazy Street View są obsługiwane przez obiekt StreetViewPanorama
, który zapewnia interfejs API „przeglądający” Street View. Każda mapa zawiera domyślną panoramę Street View, którą można pobrać, wywołując metodę getStreetView()
mapy. Gdy dodasz do mapy opcję Street View, ustawiając jej opcję streetViewControl
na true
, automatycznie połączysz Pegmana z tą domyślną panoramą Street View.
Możesz też utworzyć własny obiekt StreetViewPanorama
i ustawić dla niego używanie mapy zamiast domyślnej, ustawiając właściwość mapy streetView
bezpośrednio na utworzony obiekt. Jeśli chcesz zmienić domyślne zachowanie, na przykład automatyczne udostępnianie nakładek między mapą a panoramą, możesz zastąpić domyślną panoramę. (Zobacz sekcję Nakładki w Street View poniżej).
Kontenery Street View
Zamiast tego możesz wyświetlić element StreetViewPanorama
w oddzielnym elemencie DOM, często w elemencie <div>
.
Wystarczy przekazać element DOM w konstruktorze StreetViewPanorama
. Aby uzyskać optymalny obraz, minimalny rozmiar to 200 x 200 pikseli.
Uwaga: mimo że funkcja Street View jest przeznaczona do użycia z mapą, nie jest to wymagane. Możesz użyć osobnego obiektu Street View bez mapy.
Lokalizacje w Street View i punkt widzenia
Konstruktor StreetViewPanorama
umożliwia też ustawienie lokalizacji i punktu widzenia Street View za pomocą parametru StreetViewOptions
. Po wywołaniu obiektu możesz wywołać
setPosition()
i setPov()
, aby zmienić jego lokalizację i punkt widzenia.
Lokalizacja w Street View określa położenie ostrości zdjęcia, ale nie określa orientacji aparatu. W tym celu obiekt StreetViewPov
definiuje 2 właściwości:
heading
(domyślna wartość0
) określa kąt obrotu wokół położenia wyrażonego w stopniach w stosunku do prawdziwej północy. Nagłówki są mierzone w prawo (90 stopni to wschód).pitch
(domyślna wartość0
) definiuje wariancję kąta „w górę” lub „w dół” względem początkowego domyślnego ustawienia kamery, które często (ale nie zawsze) jest płaskie w poziomie. (Na przykład zdjęcie zrobione na wzgórzu prawdopodobnie pokazuje domyślną prezentację inną niż pozioma). Kąt nachylenia można mierzyć przy zastosowaniu wartości dodatnich (do +90 stopni w górę i w orientacji pionowej do wysokości domyślnej) oraz wartości ujemnych (do -90 stopni w dół i prostokąta w kierunku domyślnym).
Obiekt StreetViewPov
jest najczęściej używany do określenia punktu widzenia aparatu w Street View. Możesz także wybrać punkt widzenia fotografa – zazwyczaj w kierunku, w jakim skierowany jest samochód lub trójkołowiec – za pomocą metody StreetViewPanorama.getPhotographerPov()
.
Poniższy kod przedstawia mapę Bostonu z początkowym widokiem na Park Fenway. Wybranie Pegmana i przeciągnięcie go w obsługiwaną lokalizację na mapie spowoduje zmianę panoramy Street View:
TypeScript
function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: fenway, zoom: 14, } ); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: fenway, pov: { heading: 34, pitch: 10, }, } ); map.setStreetView(panorama); } declare global { interface Window { initialize: () => void; } } window.initialize = initialize;
JavaScript
function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map(document.getElementById("map"), { center: fenway, zoom: 14, }); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: fenway, pov: { heading: 34, pitch: 10, }, } ); map.setStreetView(panorama); } window.initialize = initialize;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 100%; width: 50%; }
HTML
<html> <head> <title>Street View split-map-panes</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="pano"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly" defer ></script> </body> </html>
Fragment
Śledzenie ruchu na urządzeniach mobilnych
Na urządzeniach obsługujących zdarzenia orientacji interfejs API umożliwia użytkownikom zmianę widoku Street View w zależności od ruchu urządzenia. Użytkownicy mogą się rozejrzeć, poruszając urządzeniami. Jest to tzw. śledzenie ruchu lub śledzenie rotacji urządzenia.
Deweloper aplikacji może zmienić domyślne działanie w ten sposób:
- Włącz lub wyłącz funkcję śledzenia ruchu. Domyślnie śledzenie ruchu jest włączone na każdym urządzeniu, które je obsługuje. W przykładzie poniżej wyłączono śledzenie ruchu, ale element ten jest nadal widoczny.
Pamiętaj, że użytkownik może włączyć śledzenie ruchu, klikając element sterujący.
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false });
-
Ukryj lub pokaż element sterujący śledzeniem ruchu. Domyślnie element sterujący jest widoczny na urządzeniach, które obsługują śledzenie ruchu. Użytkownik może włączyć lub wyłączyć śledzenie ruchu. Pamiętaj, że element ten nie pojawi się na urządzeniu, które nie obsługuje śledzenia ruchu – niezależnie od wartości
motionTrackingControl
.W przykładzie poniżej wyłączono śledzenie ruchu i kontrolę ruchu. W takim przypadku użytkownik nie może włączyć śledzenia ruchu:
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false, motionTrackingControl: false });
- Zmień domyślną pozycję sterowania ruchem. Domyślnie element sterujący znajduje się w prawym dolnym rogu panoramy (pozycja
RIGHT_BOTTOM
). W tym przykładzie ustawiono je na lewy dolny róg:var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTrackingControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } });
Aby zobaczyć, jak działa śledzenie ruchu, wyświetl przykład na urządzeniu mobilnym (lub dowolnym urządzeniu, które obsługuje zdarzenia orientacji urządzenia):
Nakładki w Street View
Domyślny obiekt StreetViewPanorama
obsługuje natywne wyświetlanie nakładek map.
Nakładki wyświetlają się zwykle na poziomie ulicy i są zakotwiczone w pozycji LatLng
. (Znaczniki pojawiają się na przykład z ogonami zakotwiczonymi na poziomie samolotu w lokalizacji w Street View).
Obecnie typy nakładek obsługiwanych przez panoramy Street View są ograniczone do Marker
, InfoWindow
i niestandardowych OverlayView
. Nakładki wyświetlane na mapie mogą być wyświetlane w widoku Street View, traktuje panoramę jako zamiennik obiektu Map
, wywoływanie setMap()
i przekazywanie StreetViewPanorama
jako argumentu zamiast mapy. Okna informacyjne można również otworzyć w widoku Street View, wywołując element open()
, przekazując wartość StreetViewPanorama()
zamiast mapy.
Jeśli utworzysz mapę z domyślną wartością StreetViewPanorama
, wszystkie znaczniki utworzone na tej mapie będą automatycznie udostępniane na powiązaną z nią panoramę Street View, o ile jest ona widoczna. Aby pobrać domyślną panoramę Street View, wywołaj obiekt getStreetView()
w obiekcie Map
. Pamiętaj, że jeśli wyraźnie ustawisz właściwość streetView
mapy na StreetViewPanorama
własnej konstrukcji, zastąpisz domyślną panoramę.
Poniższy przykład pokazuje znaczniki wskazujące różne lokalizacje w okolicy Astor Place, Nowy Jork. Przełącz widok na Street View, aby wyświetlić udostępnione znaczniki w lokalizacji StreetViewPanorama
.
TypeScript
let panorama: google.maps.StreetViewPanorama; function initMap(): void { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: astorPlace, zoom: 18, streetViewControl: false, } ); document .getElementById("toggle")! .addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", title: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Bus Stop", }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView()!; // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, } ); } function toggleStreetView(): void { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let panorama; function initMap() { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map(document.getElementById("map"), { center: astorPlace, zoom: 18, streetViewControl: false, }); document.getElementById("toggle").addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", title: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Bus Stop", }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, } ); } function toggleStreetView() { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; }
HTML
<html> <head> <title>Overlays Within Street View</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" id="toggle" /> </div> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Fragment
Wydarzenia Street View
Podczas nawigowania po Street View lub manipulowania jego orientacją możesz monitorować kilka zdarzeń, które wskazują zmiany stanu StreetViewPanorama
:
pano_changed
uruchamia się za każdym razem, gdy zmienia się identyfikator panoramy. To zdarzenie nie gwarantuje, że wszystkie powiązane dane z panoramy (np. linki) zmieniły się przed uruchomieniem tego zdarzenia. Oznacza ono tylko zmianę identyfikatora panoramy. Identyfikator panoramy (który można wykorzystać w odniesieniu do tej panoramy) jest stabilny tylko w bieżącej sesji przeglądarki.position_changed
uruchamia się za każdym razem, gdy zmienia się bazowa pozycja (LatLng
) panoramy. Obrót panoramy nie aktywuje tego zdarzenia. Możesz zmienić położenie podstawy panoramy bez zmiany identyfikatora panoramy, ponieważ interfejs API automatycznie łączy najbliższy identyfikator panoramy z pozycją panoramy.pov_changed
uruchamia się za każdym razem, gdy zmienia sięStreetViewPov
w Street View. To zdarzenie może się uruchomić, gdy pozycja i identyfikator panoramy pozostaną stabilne.links_changed
uruchamia się za każdym razem, gdy zmieniają się linki do Street View. To zdarzenie może się asynchronicznie uruchamiać po zmianie identyfikatora panoramy oznaczonej za pomocąpano_changed
.visible_changed
uruchamia się za każdym razem, gdy zmienia się widoczność Street View. To zdarzenie może się asynchronicznie uruchamiać po zmianie identyfikatora panoramy oznaczonej za pomocąpano_changed
.
Ten kod ilustruje, w jaki sposób można przetwarzać te zdarzenia, by zbierać dane na temat obiektu StreetViewPanorama
:
TypeScript
function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, } ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell") as HTMLElement; panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table") as HTMLElement; while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild as ChildNode); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "<b>Link: " + i + "</b>"; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description as string; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById( "position-cell" ) as HTMLElement; (positionCell.firstChild as HTMLElement).nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell") as HTMLElement; const pitchCell = document.getElementById("pitch-cell") as HTMLElement; (headingCell.firstChild as HTMLElement).nodeValue = panorama.getPov().heading + ""; (pitchCell.firstChild as HTMLElement).nodeValue = panorama.getPov().pitch + ""; }); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, } ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell"); panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table"); while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "<b>Link: " + i + "</b>"; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById("position-cell"); positionCell.firstChild.nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell"); const pitchCell = document.getElementById("pitch-cell"); headingCell.firstChild.nodeValue = panorama.getPov().heading + ""; pitchCell.firstChild.nodeValue = panorama.getPov().pitch + ""; }); } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: 50%; height: 100%; float: left; } #floating-panel { width: 45%; height: 100%; float: right; text-align: left; overflow: auto; position: static; border: 0px solid #999; }
HTML
<html> <head> <title>Street View Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td> <td id="position-cell"> </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"> </td> </tr> <table id="links_table"></table> </table> </div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html>
Fragment
Elementy sterujące Street View
Gdy wyświetlasz element StreetViewPanorama
, domyślnie pojawiają się na nim różne elementy sterujące. Możesz włączyć lub wyłączyć te ustawienia, ustawiając odpowiednie pola w StreetViewPanoramaOptions
na true
lub false
:
panControl
umożliwia obracanie panoramy. Ten element sterujący jest domyślnie wyświetlany jako standardowy, zintegrowany kompas i element sterujący, który należy przesuwać. Możesz zmienić pozycję elementu sterującego, podając wartośćPanControlOptions
w polupanControlOptions
.zoomControl
umożliwia powiększanie obrazu. Ta opcja jest domyślnie widoczna w prawym dolnym rogu panoramy. Wygląd elementu sterującego możesz zmienić, podającZoomControlOptions
w poluzoomControlOptions
.- Pole
addressControl
zawiera nakładkę tekstową z informacją o adresie powiązanej lokalizacji i udostępnia link umożliwiający otwarcie lokalizacji w Mapach Google. Wygląd elementu sterującego możesz zmienić, podającStreetViewAddressControlOptions
w poluaddressControlOptions
. fullscreenControl
umożliwia otwarcie Street View w trybie pełnoekranowym. Wygląd elementu sterującego możesz zmienić, podającFullscreenControlOptions
w polufullscreenControlOptions
.motionTrackingControl
umożliwia włączenie lub wyłączenie śledzenia ruchu na urządzeniach mobilnych. Ta opcja jest widoczna tylko na urządzeniach, które obsługują zdarzenia orientacji. Domyślnie element sterujący znajduje się w prawym dolnym rogu panoramy. Możesz zmienić pozycję elementu sterującego, podając wartośćMotionTrackingControlOptions
. Więcej informacji znajdziesz w sekcji o śledzeniu ruchu.linksControl
zawiera strzałki wskazujące obraz, który może wyświetlić się na sąsiednich zdjęciach panoramicznych.- Opcja Zamknij pozwala użytkownikowi zamknąć podgląd Street View. Możesz włączyć lub wyłączyć element sterujący Zamknij, ustawiając
enableCloseButton
natrue
lubfalse
.
Ten przykład zmienia elementy sterujące wyświetlane w powiązanym Street View i usuwa linki do widoku:
TypeScript
function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Street View Controls</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html>
Fragment
Bezpośredni dostęp do danych Street View
Możesz automatycznie określić dostępność danych Street View lub zwrócić informacje o konkretnych panoramach bez konieczności bezpośredniej manipulacji mapą i panoramą. Możesz to zrobić za pomocą obiektu StreetViewService
, który zapewnia interfejs do danych przechowywanych w usłudze Street View Google.
Prośby o wykonanie usługi Street View
Dostęp do usługi Street View jest asynchroniczny, ponieważ interfejs API Map Google musi wywoływać serwer zewnętrzny. Z tego powodu musisz przekazać metodę wywołania zwrotnego, aby wykonać żądanie. Ta metoda wywołania zwrotnego przetwarza wynik.
Żądania do StreetViewService
można inicjować za pomocą StreetViewPanoRequest
lub StreetViewLocationRequest
.
Żądanie korzystające z metody StreetViewPanoRequest
zwraca dane panoramy z identyfikatorem referencyjnym, który jednoznacznie identyfikuje panoramę. Pamiętaj, że te identyfikatory referencyjne są stabilne tylko przez cały okres obsługi zdjęć z tą panoramą.
Żądanie korzystające z funkcji StreetViewLocationRequest
wyszukuje dane dotyczące panoramy w określonej lokalizacji, korzystając z tych parametrów:
location
określa lokalizację (szerokość i szerokość geograficzną), by wyszukać panoramę.preference
określa, jaka panorama powinna znajdować się w pobliżu tego obszaru.radius
ustawia promień wyznaczający w metrach, w którym ma szukać panoramy, wyśrodkowanej na podanej szerokości i długości geograficznej. Jeśli nie zostanie podany, przyjmuje domyślnie wartość 50.source
określa źródło panoram do wyszukiwania. Prawidłowe wartości:default
korzysta z domyślnych źródeł w Street View; wyszukiwania nie są ograniczone do określonych źródeł.outdoor
ogranicza wyszukiwania do kolekcji na świeżym powietrzu. Pamiętaj, że w przypadku określonej lokalizacji panoramy zewnętrzne mogą nie być dostępne.
Odpowiedzi usługi Street View
Funkcja getPanorama()
wymaga funkcji wywołania zwrotnego do wykonania po pobraniu wyniku z usługi Street View. Ta funkcja wywołania zwrotnego zwraca zbiór danych panoramy w obiekcie StreetViewPanoramaData
i kod StreetViewStatus
oznaczający stan żądania w tej kolejności.
Specyfikacja obiektu StreetViewPanoramaData
zawiera metadane, które dotyczą panoramy Street View w tej postaci:
{ "location": { "latLng": LatLng, "description": string, "pano": string }, "copyright": string, "links": [{ "heading": number, "description": string, "pano": string, "roadColor": string, "roadOpacity": number }], "tiles": { "worldSize": Size, "tileSize": Size, "centerHeading": number } }
Pamiętaj, że ten obiekt danych nie jest obiektem StreetViewPanorama
. Aby utworzyć obiekt Street View na podstawie tych danych, musisz utworzyć StreetViewPanorama
i wywołać setPano()
, przekazując identyfikator w formie zwróconej w location.pano
.
Kod status
może zwracać jedną z tych wartości:
OK
oznacza, że usługa znalazła pasującą panoramę.ZERO_RESULTS
oznacza, że usługa nie mogła znaleźć pasującej panoramy na podstawie przyjętych kryteriów.UNKNOWN_ERROR
oznacza, że nie udało się przetworzyć żądania Street View, jednak dokładna przyczyna jest nieznana.
Następujący kod tworzy StreetViewService
, który reaguje na kliknięcie mapy przez użytkownika, tworząc znaczniki, które po kliknięciu wyświetlają StreetViewPanorama
tej lokalizacji. Kod wykorzystuje zawartość StreetViewPanoramaData
zwracaną z usługi.
TypeScript
/* * Click the map to set a new location for the Street View camera. */ let map: google.maps.Map; let panorama: google.maps.StreetViewPanorama; function initMap(): void { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement ); // Set up the map. map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location.") ); }); } function processSVData({ data }: google.maps.StreetViewResponse) { const location = data.location!; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
/* * Click the map to set a new location for the Street View camera. */ let map; let panorama; function initMap() { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") ); // Set up the map. map = new google.maps.Map(document.getElementById("map"), { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location.") ); }); } function processSVData({ data }) { const location = data.location; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Directly Accessing Street View Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map" style="width: 45%; height: 100%; float: left"></div> <div id="pano" style="width: 45%; height: 100%; float: left"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Fragment
Wykonywanie niestandardowych widoków Street View
Interfejs Maps JavaScript API obsługuje wyświetlanie niestandardowych panoram w obiekcie StreetViewPanorama
. Dzięki niestandardowym panoramom możesz pokazać wnętrze budynków, widoki z malowniczych miejsc lub dowolnej swojej wyobraźni. Te niestandardowe panoramy możesz nawet połączyć z istniejącymi panoramami Google.
Aby skonfigurować zestaw niestandardowych zdjęć panoramicznych, wykonaj te czynności:
- Utwórz podstawowy obraz panoramiczny dla każdej niestandardowej panoramy. Powinien to być obraz o najwyższej rozdzielczości, w którym chcesz go powiększać.
- (Opcjonalne, ale zalecane) Utwórz zestaw panoramicznych kafelków na różnych poziomach powiększenia z obrazu podstawowego.
- Twórz połączenia między niestandardowymi panoramami.
- (Opcjonalnie) Utwórz panoramy „wejściowe” na istniejących zdjęciach Google Street View i dostosuj linki ze zbioru niestandardowego do standardowego.
- Zdefiniuj metadane dla każdego obrazu panoramicznego w obiekcie
StreetViewPanoramaData
. - Zaimplementuj metodę, która określa dane i obrazy obrazów niestandardowych, i wskaż ją jako niestandardowy moduł obsługi w obiekcie
StreetViewPanorama
.
Więcej informacji na ten temat znajdziesz w sekcjach poniżej.
Tworzenie niestandardowych panoram
Każda panorama Street View to obraz lub zbiór zdjęć, które zapewniają pełny widok 360 stopni z jednego miejsca.
Obiekt StreetViewPanorama
używa obrazów zgodnych z odwzorowaniem walcowym równoodległościowym (Plate Carrée). Odwzorowanie to obejmuje 360 stopni w poziomie (pełny pełny widok) i 180 stopni w pionie (od prawej do prawej). Te pola widzenia pozwalają uzyskać obraz o współczynniku proporcji 2:1. Poniżej widać pełną panoramę.
Zwykle obrazy panoramiczne są wykonywane przez zrobienie wielu zdjęć w jednym miejscu i złączenie ich za pomocą oprogramowania do tworzenia panoram. Więcej informacji znajdziesz w artykule Porównanie aplikacji do łączenia zdjęć w Wikipedii. Takie zdjęcia powinny udostępniać jeden punkt początkowy, w którym robione są poszczególne zdjęcia panoramiczne. Powstała panorama 360° może wówczas definiować odwzorowanie na sferze z obrazem ujętym w dwuwymiarową powierzchnię kuli.
Korzystanie z panoramy jako odwzorowanie na sferze za pomocą prostokątnego układu współrzędnych jest przydatne, gdy dzielisz obraz na prostokątny kafelek i wyświetlasz na podstawie obliczonych współrzędnych płytek.
Tworzenie niestandardowych kafelków panoramy
Street View obsługuje również różne poziomy szczegółów zdjęcia za pomocą elementów sterujących powiększeniem, które umożliwiają powiększanie i pomniejszanie widoku domyślnego. Ogólnie Street View zapewnia 5 poziomów powiększenia każdego panoramy. Gdyby wyświetlał się tylko jeden obraz panoramiczny, byłby on duży i znacznie spowolniłby działanie aplikacji lub żeby obraz był w niskiej rozdzielczości na wyższych poziomach. Na szczęście możemy użyć podobnego wzoru służącego do wyświetlania kafelków mapy Google na różnych poziomach powiększenia, aby tworzyć odpowiednie obrazy do panoram przy każdym poziomie powiększenia.
Po załadowaniu StreetViewPanorama
domyślnie wyświetlany jest obraz składający się z 25% (90 stopni) łuku w poziomie na poziomie powiększenia 1. Ten widok odpowiada mniej więcej normalnemu polu widzenia. Pomniejszanie w widoku domyślnym „szerokim” zapewnia szerszy łuk, a powiększanie tego pola do mniejszego. StreetViewPanorama
automatycznie oblicza odpowiednie pole widzenia dla wybranego poziomu powiększenia, a następnie wybiera zdjęcia najbardziej odpowiednie dla tej rozdzielczości, wybierając zestaw kafelków mniej więcej taki sam jak wymiary poziomego pola widzenia. Te pola widoku odpowiadają poziomom powiększenia Street View:
Poziom powiększenia Street View | Pole widzenia (stopnie) |
---|---|
0 | 180 |
1 (domyślnie) | 90 |
2 | 45 |
3 | 22,5 |
4 | 11,25 |
Pamiętaj, że rozmiar zdjęcia wyświetlanego w Street View zależy całkowicie od rozmiaru ekranu (szerokości) kontenera Street View. Jeśli udostępnisz szerszy kontener, usługa będzie nadal mieć to samo pole widzenia dla każdego poziomu powiększenia, ale może zamiast tego wybrać kafelki bardziej odpowiednie dla tej rozdzielczości.
Każda panorama składa się z odwzorowania walcowego równoodległościowego, więc jej tworzenie jest stosunkowo proste. Odwzorowanie zapewnia obraz o współczynniku proporcji 2:1, dlatego używanie płytek o proporcjach 2:1 jest łatwiejsze, chociaż możesz je wyświetlać na mapach kwadratowych, ponieważ pole widoku jest kwadratowe.
W przypadku kafelków 2:1 pojedynczy obraz obejmujący całą panoramę reprezentuje cały świat (obraz podstawowy) na poziomie powiększenia 0, przy czym każdy dodatkowy poziom powiększenia oferuje 4 kafelki powiększenia. (Na przykład na poziomie powiększenia 2 cała panorama składa się z 16 kafelków). Uwaga: poziomy powiększenia widoku płytek Street View nie są bezpośrednio powiązane z poziomami powiększenia oferowanymi za pomocą elementu sterującego Street View. Zamiast tego poziomy powiększenia w Street View wybierają pole widzenia (FoV), z którego dobierane są odpowiednie kafelki.
Ogólnie warto ustawić kafelki obrazu tak, aby można je było wybierać automatycznie. Schemat nazewnictwa jest opisany poniżej w sekcji Obsługa niestandardowych próśb o panoramę.
Obsługa niestandardowych próśb o utworzenie panoramy
Aby użyć niestandardowej panoramy, wywołaj funkcję StreetViewPanorama.registerPanoProvider()
, podając nazwę metody dostawcy niestandardowej panoramy. Metoda dostawcy panoramy musi zwracać obiekt StreetViewPanoramaData
o takim podpisie:
Function(pano):StreetViewPanoramaData
StreetViewPanoramaData
to obiekt w tej postaci:
{ copyright: string, location: { description: string, latLng: google.maps.LatLng, pano: string }, tiles: { tileSize: google.maps.Size, worldSize: google.maps.Size, heading: number, getTileUrl: Function }, links: [ description: string, heading: number, pano: string, roadColor: string, roadOpacity: number ] }
Wyświetlaj niestandardową panoramę w następujący sposób:
- Ustaw właściwość
StreetViewPanoramaOptions.pano
na wartość niestandardową. - Wywołaj
StreetViewPanorama.registerPanoProvider()
, aby określić niestandardową funkcję dostawcy panoramy. - Zaimplementuj niestandardową funkcję dostawcy panoramy, by obsługiwała określoną wartość
pano
. - utworzyć obiekt
StreetViewPanoramaData
, - Ustaw właściwość
StreetViewTileData.getTileUrl
na nazwę udostępnionej przez Ciebie funkcji dostawcy kafelków. na przykładgetCustomPanoramaTileUrl
. - Zaimplementuj niestandardową funkcję dostawcy kafelka, tak jak w przykładach poniżej.
- Zwraca obiekt
StreetViewPanoramaData
.
Uwaga: nie ustawiaj bezpośrednio właściwości position
w polu StreetViewPanorama
, gdy chcesz wyświetlić niestandardowe panoramy. Takie działanie spowoduje, że usługa Street View poprosi o dodanie domyślnych zdjęć Street View w pobliżu danej lokalizacji. Zamiast tego ustaw tę pozycję w polu location.latLng
niestandardowego obiektu StreetViewPanoramaData
.
Poniższy przykład pokazuje niestandardową panoramę biura Google Sydney. Pamiętaj, że ten przykład nie wykorzystuje mapy ani domyślnych zdjęć Street View:
TypeScript
function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { pano: "reception", visible: true } ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { pano: "reception", visible: true } ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano) { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Custom Street View Panoramas</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html>
Fragment
Niestandardowy dostawca panoramy zwraca odpowiedni kafelek na podstawie podanego identyfikatora, poziomu powiększenia i współrzędnych jego fragmentu.
Wybór obrazów zależy od przekazywanych wartości, dlatego warto nazwać obrazy, które można wybierać automatycznie, biorąc pod uwagę te przekazane wartości, takie jak pano_zoom_tileX_tileY.png
.
Ten przykład dodaje do obrazu kolejną strzałkę oprócz domyślnych strzałek Street View, które kierują do Google Sydney i prowadzą do zdjęć niestandardowych:
TypeScript
let panorama: google.maps.StreetViewPanorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle: google.maps.StreetViewPanoramaData; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData { return { location: { pano: "reception", // The ID for this custom panorama. description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function ( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view") as HTMLElement, { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider( (pano: string): google.maps.StreetViewPanoramaData => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; } ); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if ( panorama.getPano() === (outsideGoogle.location as google.maps.StreetViewLocation).pano ) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap(): void { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }: google.maps.StreetViewResponse) => { outsideGoogle = data; initPanorama(); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { return { location: { pano: "reception", description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: outsideGoogle.location.pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function (pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { pano: outsideGoogle.location.pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider((pano) => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }) => { outsideGoogle = data; initPanorama(); }); } window.initMap = initMap;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
HTML
<html> <head> <title>Custom Street View Panorama Tiles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="street-view"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>