שירות Street View

סקירה כללית

בחירת פלטפורמה: Android iOS JavaScript

Google Street View מאפשר נוף פנורמי של 360 מעלות, כבישים ייעודיים בכל אזור הכיסוי שלו. ממשק API של Street View זהה לזה של אפליקציית מפות Google. (https://maps.google.com/). הרשימה של ערים נתמכות ב-Street View זמינות Google אתר מפות Google.

למטה מוצגת דוגמה של תמונת Street View.


Maps JavaScript API מספק שירות Street View כדי להשיג את התמונות שמופיעות במפות Google ולבצע בהן מניפולציות Street View. שירות Street View זה נתמך באופן מקומי בתוך בדפדפן.

שימוש במפה ב-Street View

למרות שאפשר להשתמש ב-Street View בתוך רכיב DOM עצמאי, שימושי כאשר מציינים מיקום במפה. כברירת מחדל, Street View הוא מופעלת במפה, ופקד האטב-איש של Street View מופיע משולבות בפקדי הניווט (מרחק התצוגה והזזה). אפשר להסתיר את זה לשלוט בתוך MapOptions של המפה באמצעות הגדרה streetViewControl עד false. אפשר גם לשנות מיקום ברירת המחדל של הפקד Street View לפי הגדרה של streetViewControlOptions.position של Map לנכס ControlPosition חדש.

אמצעי הבקרה של האטב-איש של Street View מאפשר להציג תוכן Street View של תמונות פנורמיות ישירות בתוך המפה. כשהמשתמש לוחץ ומחזיק את האטב-איש, המפה מתעדכנת ומציגה קווי מתאר כחולים סביב רחובות שתומכים ב-Street View, שמספק חוויית משתמש דומה לזו של אפליקציית מפות Google.

כאשר המשתמש משחרר את סמן האטב-איש ברחוב, המפה מתעדכנת ל להציג תמונת פנורמה של Street View של המיקום שצוין.

צילומים פנורמיים ב-Street View

יש תמיכה בתמונות Street View באמצעות אובייקט StreetViewPanorama, שמספק API של Street View ל"צפייה". כל מפה מכילה ברירת מחדל תמונת פנורמה של Street View, שניתן לאחזר על ידי שליחת שיטת getStreetView() במפה. כשמוסיפים תמונת Street View לשלוט במפה על ידי הגדרת הstreetViewControl שלו ל-true, אתם תחברו את האטב-איש באופן אוטומטי לשליטה בפנורמה ברירת המחדל הזו של Street View.

אפשר גם ליצור StreetViewPanorama משלך ולהגדיר את המפה לשימוש הזה במקום בברירת המחדל, על ידי הגדרת המאפיין streetView של המפה באופן מפורש את האובייקט המובנה הזה. מומלץ לשנות את ברירת המחדל של הפנורמה אם רוצים לשנות את התנהגות ברירת המחדל, למשל שיתוף שכבות-על בין המפה והפנורמה. (ראו שכבות-על ב-Street View שבהמשך.)

מאגרים של Street View

במקום זאת, כדאי להציג StreetViewPanorama בתוך רכיב DOM נפרד, בדרך כלל רכיב <div>. צריך רק להעביר את רכיב ה-DOM בתוךStreetViewPanorama constructor. לתצוגה אופטימלית של תמונות, מומלץ להשתמש בגודל מינימלי של 200 פיקסלים על 200 פיקסלים.

הערה: למרות ש-Street View הפונקציונליות הזו נועדה לשימוש בשילוב עם מפה, אינו חובה. אפשר להשתמש באובייקט Street View נפרד. בלי מפה.

מיקומים ונקודת מבט של Street View (POV)

ה-constructor של StreetViewPanorama מאפשר לך גם להגדיר את המיקום ונקודת המבט של Street View באמצעות StreetViewOptions. אפשר לקרוא לאובייקט setPosition() ו-setPov() אחרי כדי לשנות את המיקום ואת נקודת המבט שלו.

המיקום של Street View מגדיר את המיקום של המיקוד של המצלמה של תמונה, אבל הוא לא מגדיר את כיוון המצלמה לאותה תמונה. למטרה הזו, האובייקט StreetViewPov מגדיר שני מאפיינים:

  • heading (ברירת מחדל – 0) קובעת את זווית הסיבוב מסביב למוקד המצלמה במעלות ביחס לצפון אמיתי. הכותרות הן נמדד בכיוון השעון (90 מעלות הוא הערך האמיתי של מזרח).
  • pitch (ברירת מחדל 0) מגדיר את השונות בזווית 'למעלה' או 'למטה' מגובה הצליל הראשוני של המצלמה, שבדרך כלל הוא (אבל לא תמיד) אופקי שטוח. (לדוגמה, תמונה שצולמה על גבעה מציגים כנראה גובה-רוחב של ברירת מחדל שאינו אופקי.) זוויות מצגת המכירות הן נמדדים בערכים חיוביים כלפי מעלה (עד 90 מעלות ישר למעלה אורתוגונלי לגובה הצליל המוגדר כברירת מחדל) וערכים שליליים עם מבט כלפי מטה (ל- -90) מעלות ישר למטה ואורתוגונלי לגובה ברירת המחדל).

האובייקט StreetViewPov משמש לרוב כדי לקבוע של מצלמת Street View. אפשר גם לקבוע נקודת המבט של הצלם — בדרך כלל מכונית או תלת-אופן היה פונה – עם אמצעי תשלום אחד (StreetViewPanorama.getPhotographerPov()).

הקוד הבא מציג מפה של בוסטון עם תצוגה ראשונית של פנוויי פארק. בחירת האטב-איש וגרירתו למיקום נתמך במפה תשנה את הפנורמה של Street View:

TypeScript

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

  map.setStreetView(panorama);
}

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

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Street View split-map-panes</title>

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

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

כדאי לנסות דוגמה

מעקב תנועה במכשירים ניידים

במכשירים שתומכים באירועי כיוון של מכשיר, ה-API מציע למשתמשים את היכולת לשנות את נקודת המבט של Street View על סמך התנועה של במכשיר. המשתמשים יכולים להזיז את המכשירים שלהם כדי להסתכל סביב. תנועה כזו נקראת תנועה או מעקב אחר סבב מכשירים.

כמפתחי אפליקציות, אתם יכולים לשנות את התנהגות ברירת המחדל באופן הבא:

  • הפעלה או השבתה של הפונקציונליות של מעקב אחר תנועה. כברירת מחדל, תנועה המעקב מופעל בכל מכשיר שתומך בו. הדוגמה הבאה משבית את מעקב התנועה, אך משאיר את פקד מעקב התנועה גלוי. (לתשומת ליבך, המשתמש יכול להפעיל מעקב אחר תנועה על ידי הקשה על המתג). 
    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false
    });

  • הסתרה או הצגה של הפקד למעקב אחר תנועה. כברירת מחדל, אמצעי הבקרה הוא שמוצגות במכשירים שתומכים במעקב אחר תנועה. המשתמש יכול להקיש על כדי להפעיל או להשבית את מעקב התנועה. שימו לב שאמצעי הבקרה אף פעם לא יופיעו אם המכשיר לא תומך במעקב אחר תנועה, הערך של motionTrackingControl.

    הדוגמה הבאה משביתה גם מעקב תנועה וגם אמצעי הבקרה למעקב אחר תנועה. במקרה הזה, המשתמש לא יכול להפנות את התנועה מעקב מופעל:

    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
    });
  • שינוי מיקום ברירת המחדל של הפקד למעקב אחרי תנועה. כברירת מחדל, הפקד מופיע ליד הפינה הימנית התחתונה של הפנורמה (מיקום RIGHT_BOTTOM). הדוגמה הבאה קובעת את המיקום של מחוון משמאל למטה: 
    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
      }
    });

כדי לראות את המעקב אחר תנועה בפעולה, הצג את הדוגמה הבאה בנייד מכשיר (או כל מכשיר שתומך באירועים של כיוון המכשיר):


להצגת דוגמה

שכבות-על ב-Street View

אובייקט ברירת המחדל StreetViewPanorama תומך ב-Native תצוגת מפה שכבות-על. שכבות-על מופיעות בדרך כלל ב"רמת הרחוב" עוגן ב-LatLng במיקומי המודעות החדשים. (הסמנים יופיעו כשזנבם מעוגן אל המיקום של הסרטון מישור אופקי בתוך הפנורמה של Street View, למשל).

נכון לעכשיו, סוגי שכבות-העל הנתמכים ב-Street View תמונות פנורמה מוגבלות ל-Marker שניות, InfoWindow ו- OverlayView בהתאמה אישית. שכבות-על המוצגות במפה עשויות להיות שמוצגת בפנורמה של Street View על ידי התייחסות לפנורמה כתחליף לאובייקט Map, קריאה ל-setMap() והעברת StreetViewPanorama כארגומנט במקום כמפה. מידע בדומה לכך, ניתן לפתוח חלונות פנורמית ב-Street View על ידי התקשרות open(), העברת StreetViewPanorama() במקום מפה.

בנוסף, כשיוצרים מפה עם ברירת מחדל StreetViewPanorama, כל הסמנים שנוצרו במפה משותפים באופן אוטומטי לפנורמה Street View המשויכת למפה, כל עוד נראה פנורמה. כדי לאחזר את תמונת הפנורמה המוגדרת כברירת המחדל ב-Street View, צריך להתקשר getStreetView() באובייקט Map. שימו לב שאם להגדיר במפורש את מאפיין streetView של המפה כ StreetViewPanorama של הבנייה שלך, יבוטלו הפנורמה המוגדרת כברירת מחדל.

בדוגמה הבאה מוצגים סמנים לציון מיקומים שונים בסביבה אסטור פלייס, ניו יורק. יש להחליף את התצוגה ל-Street View כדי להציג את סמנים משותפים שמוצגים בתוך StreetViewPanorama.

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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


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

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

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

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

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

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

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

JavaScript

let panorama;

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

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

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

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

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

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

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

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

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

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

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

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

style.css

HTML

<html>
  <head>
    <title>Overlays Within Street View</title>

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

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

כדאי לנסות דוגמה

אירועי Street View

במהלך ניווט בין Street View או ביצוע מניפולציות ייתכן שתרצו לעקוב אחרי כמה אירועים שמצביעים שינויים במצב של StreetViewPanorama:

  • pano_changed מופעל בכל פעם שהפאנו היחיד שינויים במזהה. האירוע הזה לא מבטיח שנתונים משויכים כלשהם בתוך הפנורמה (כגון הקישורים) השתנתה גם היא עד שהאירוע הזה מופעל, האירוע הזה רק מציין המזהה השתנה. שימו לב שמזהה הפאנו (שבו אפשר להשתמש כדי להפנות פנורמה זו) יציב רק בסשן הנוכחי של הדפדפן.
  • position_changed מופעל בכל פעם (LatLng) המיקום של השינויים בפנורמה. מסתובב תמונת פנורמה לא תפעיל את האירוע הזה. לתשומת ליבכם: אפשר לשנות את המיקום הבסיסי של תמונת פנורמה מבלי לשנות את מאחר שה-API ישייך באופן אוטומטי את מזהה פנורמי למיקום הפנורמה.
  • pov_changed מופעל בכל פעם ש-Street View StreetViewPov שינויים. לתשומת ליבך: האירוע הזה עשוי לפעול כשהמיקום ומזהה האנושות נשארים יציבים.
  • links_changed מופעל בכל פעם ש-Street View קישורים משתנים. לתשומת ליבכם: האירוע הזה עשוי לפעול באופן אסינכרוני אחרי שינוי במזהה הפאנו שצוין עד pano_changed.
  • visible_changed מופעל בכל פעם ש-Street View שינויים בהרשאות הגישה. לתשומת ליבכם: האירוע הזה עשוי לפעול באופן אסינכרוני אחרי שינוי במזהה הפאנו שצוין עד pano_changed.

הקוד הבא מדגים איך אפשר לטפל באירועים האלה כדי לאסוף נתונים על StreetViewPanorama הבסיסיים:

TypeScript

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

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

    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table") as HTMLElement;

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

      valueCell.innerHTML = links[i].description as string;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById(
      "position-cell"
    ) as HTMLElement;

    (positionCell.firstChild as HTMLElement).nodeValue =
      panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell") as HTMLElement;
    const pitchCell = document.getElementById("pitch-cell") as HTMLElement;

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

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

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;
index.js

CSS

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

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

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

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

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

style.css

HTML

<html>
  <head>
    <title>Street View Events</title>

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

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

כדאי לנסות דוגמה

פקדים ב-Street View

כשמציגים StreetViewPanorama, מגוון של הפקדים מופיעים בפנורמה כברירת מחדל. אפשר להפעיל או להשבית באמצעות הגדרת השדות המתאימים StreetViewPanoramaOptions אל true או אל false:

  • panControl מספק דרך לסובב את פנורמה. אמצעי הבקרה הזה מופיע כברירת מחדל כמצפן משולב רגיל והזזה. כדי לשנות את מיקום הרכיב האינטראקטיבי, אפשר PanControlOptions בתוך שדה panControlOptions.
  • zoomControl מאפשר לשנות את מרחק התצוגה בתוך התמונה. הזה המקש הזה מופיע כברירת מחדל ליד הפינה הימנית התחתונה של הפנורמה. כדי לשנות את המראה של אמצעי הבקרה, אפשר ZoomControlOptions בתוך שדה zoomControlOptions.
  • addressControl מספק שכבת-על של טקסט שמציינת את הכתובת של המיקום המשויך ומציע קישור לפתיחת את המיקום במפות Google. כדי לשנות את המראה של אמצעי הבקרה, אפשר StreetViewAddressControlOptions בתוך שדה addressControlOptions.
  • fullscreenControl מאפשר לפתוח את Street View במצב מסך מלא. כדי לשנות את המראה של אמצעי הבקרה, אפשר FullscreenControlOptions בתוך שדה fullscreenControlOptions.
  • motionTrackingControl מציע את האפשרות להפעיל או להשבית מעקב תנועה במכשירים ניידים. אמצעי הבקרה הזה מופיע רק במכשירים שתומכים באירועי כיוון של המכשיר. כברירת מחדל, אמצעי הבקרה מופיע ליד הפינה הימנית התחתונה של הפנורמה. אפשר לשנות את הגדרות הבקרה את המיקום באמצעות ציון MotionTrackingControlOptions. מידע נוסף זמין בקטע בנושא תנועה מעקב אחר המרות.
  • linksControl מספק חיצים מנחים על התמונה עבור עוברים אל תמונות פנורמיות סמוכות.
  • הפקד 'סגירה' מאפשר למשתמש לסגור את מציג Street View. אפשר הפעלה או השבתה של הפקד 'סגירה' באמצעות הגדרה enableCloseButton אל true או false.

הדוגמה הבאה משנה את הפקדים המוצגים בתוך Street View ומסיר את הקישורים לתצוגה המפורטת:

TypeScript

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

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

JavaScript

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Street View Controls</title>

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

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

כדאי לנסות דוגמה

גישה ישירה לנתוני Street View

ייתכן שתרצו לקבוע באופן פרוגרמטי את הזמינות של נתוני Street View, או מחזיר מידע על תמונות פנורמיות מסוימות, ללא צורך בשינוי ישיר של המפה/פנורמה. מותר לך לעשות את זה באמצעות האובייקט StreetViewService, שמספק של הנתונים שמאוחסנים בשירות Street View של Google.

בקשות שירות של Street View

הגישה לשירות Street View היא אסינכרונית, מכיוון ש-Google Maps API צריך לבצע קריאה לשרת חיצוני. לכן, צריך להעביר שיטת קריאה חוזרת להפעלה לאחר השלמת הבקשה. הזה שיטת הקריאה החוזרת מעבדת את התוצאה.

אפשר לשלוח בקשות אל StreetViewService באמצעות StreetViewPanoRequest או StreetViewLocationRequest.

בקשה באמצעות StreetViewPanoRequest מחזירה פנורמה בהינתן מזהה הפניה שמזהה באופן ייחודי את הפנורמה. שימו לב מזהי העזר האלה יציבים רק לכל משך החיים של התמונה. פנורמה.

בקשה באמצעות StreetViewLocationRequest חיפושים של נתוני פנורמה במיקום מסוים באמצעות הפרמטרים הבאים:

  • location מציין את המיקום (קו רוחב וקו אורך) לחיפוש פנורמה.
  • preference מגדיר העדפה לגבי המיקום של הפנורמה בתוך רדיוס: זה שהכי קרוב למיקום שצוין או הכי טוב בתוך הרדיוס.
  • radius מגדיר רדיוס שנקבע במטרים, שבו צריך לחפש תמונות פנורמה, שמתרכזת בקו הרוחב ובקו האורך הנתונים. אם לא מזינים ערך, ערך ברירת המחדל הוא 50.
  • source מציין את המקור של תמונות הפנורמה לחיפוש. הערכים החוקיים הם:
    • default משתמש במקורות ברירת המחדל ל-Street View; חיפושים אינם מוגבלים למקורות מסוימים.
    • בoutdoor יש הגבלה על החיפושים לאוספים בחוץ. שים לב שייתכן כי תמונות פנורמיות בחוץ לא קיימות במיקום שצוין.

הודעות שירות של Street View

הפונקציה getPanorama() כדי להפעיל אחזור של תוצאה צריך פונקציית callback משירות Street View. פונקציית הקריאה החוזרת מחזירה סדרה של נתוני פנורמה בתוך אובייקט StreetViewPanoramaData קוד StreetViewStatus שמציין את סטטוס הבקשה, בתוך הסדר הזה.

מפרט אובייקט StreetViewPanoramaData מכיל מטא-נתונים על תמונת פנורמית ב-Street View בצורה הבאה:

{
  "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
  }
}

חשוב לשים לב שאובייקט הנתונים הזה אינו StreetViewPanorama לאובייקט עצמו. כדי ליצור אובייקט Street View באמצעות הנתונים האלה, צריך: צריך ליצור StreetViewPanorama ולהתקשר setPano(), מעבירה את המזהה כפי שצוין שדה location.pano.

הקוד status יכול להחזיר אחד מהערכים הבאים:

  • OK מציין שהשירות מצא התאמה פנורמה.
  • ZERO_RESULTS מציין שהשירות לא הצליח למצוא פנורמה תואמת לקריטריונים שהועברו.
  • UNKNOWN_ERROR מציין שבקשת Street View לא ניתן לעבד, למרות שהסיבה המדויקת לא ידועה.

הקוד הבא יוצר StreetViewService שמגיב ללחיצה של משתמש על מפה באמצעות יצירת סמנים, כשלוחצים עליו, מציגים StreetViewPanorama המיקום. הקוד משתמש בתוכן של StreetViewPanoramaData הוחזר מהשירות.

TypeScript

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement
  );

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

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }: google.maps.StreetViewResponse) {
  const location = data.location!;

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

  panorama.setPano(location.pano as string);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);

  marker.addListener("click", () => {
    const markerPanoID = location.pano;

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

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

JavaScript

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

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

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

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

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

כדאי לנסות דוגמה

יצירת תמונות פנורמיות ב-Street View בהתאמה אישית

Maps JavaScript API תומך בתצוגה של תמונות פנורמיות בהתאמה אישית בתוך האובייקט StreetViewPanorama. באמצעות התאמה אישית פנורמיות, ניתן להציג את פנים המבנים, נופים מקומות ציוריים, או כל דבר אחר מהדמיון שלך. אפשר אפילו לקשר את תמונות הפנורמה המותאמות אישית האלה ל-Street View הקיים של Google פנורמיות.

הגדרת קבוצה של תמונות פנורמיות מותאמות אישית כרוכה את השלבים הבאים:

  • יצירת תמונה פנורמית בסיסית לכל פנורמה מותאמת אישית. הזה התמונה הבסיסית צריכה להיות בתמונה ברזולוציה הגבוהה ביותר שאתם רוצים להציג תמונות שצולמו בזום.
  • (אופציונלי, אך מומלץ) יוצרים קבוצה של משבצות פנורמיות ברמות זום שונות מהתמונה הבסיסית.
  • יצירת קישורים בין תמונות פנורמיות בהתאמה אישית.
  • (אופציונלי) יש לציין 'רשומה' נופים בתוך תמונות Street View הקיימות של Google והתאמה אישית של קישורים ממערך מותאם אישית לקבוצה הרגילה.
  • הגדרת מטא נתונים לכל תמונה פנורמית בתוך אובייקט StreetViewPanoramaData.
  • יישום שיטה שקובעת את תמונת הפנורמה המותאמת אישית נתונים ותמונות, ולהגדיר את השיטה הזו כ-handler המותאם אישית שלכם בתוך האובייקט StreetViewPanorama.

הקטעים הבאים מסבירים את התהליך הזה.

יצירת צילומים פנורמיים מותאמים אישית

כל פנורמה של Street View היא תמונה או קבוצת תמונות שמספק תצוגה מלאה של 360 מעלות ממיקום אחד. האובייקט StreetViewPanorama משתמשת בתמונות שתואמות לתבנית המלבנית היטל). היטל כזה מכיל 360 מעלות של תצוגה אופקית (תצוגה מקיפה) ו-180 מעלות של תצוגה אנכית (ישירה למעלה עד למטה). השדות האלה התוצאה תהיה תמונה ביחס גובה-רוחב של 2:1. א' תמונה פנורמית מלאה מוצגת למטה.

נוף פנורמי של רחוב עירוני

תמונות פנורמה מתקבלות בדרך כלל על ידי צילום מספר תמונות תמונות ממיקום אחד ותחבר אותן ביחד באמצעות תוכנת פנורמה. (ראו בוויקיפדיה השוואה בין אפליקציות לחיבור תמונות לקבלת מידע נוסף). תמונות כאלה צריכות להיות באותו "מצלמה" אחת לוקוס, שממנו צולמה כל אחת מהתמונות הפנורמיות. שמתקבלת פנורמית ב-360 מעלות, יכולה להגדיר היטל על כדור עם תמונה עטופה לפני השטח הדו-ממדי של כדור הארץ.

תמונה פנורמית ב-360° עם נוף פנורמי של רחוב על פני השטח

התייחסות לנוף הפנורמי כאל היטל על כדור עם קו ישר למערכת הקואורדינטות יתרון אם מחלקים את התמונה ל- אריחים בקווים ישרים, והצגת תמונות על סמך אריח מחושב של הקואורדינטות.

יצירת אריחי פנורמה מותאמים אישית

אפליקציית Street View תומכת גם ברמות שונות של פרטי תמונה באמצעות בשימוש בפקד זום, שמאפשר לך להגדיל או להקטין את התצוגה תצוגת ברירת המחדל. באופן כללי, Street View מספק רמות של רזולוציית זום בכל תמונה פנורמית נתונה. אם הייתם רוצים מסתמכים על תמונה פנורמית אחת כדי להציג את כל רמות הזום, כמו תמונה הם בהכרח יהיו גדולים מדי ויאטו משמעותית או להיות ברזולוציה נמוכה כל כך ברמות זום גבוהות יותר כך שתציגו תמונה מפוקסלת בצורה לא טובה. עם זאת, למרבה המזל, אנחנו יכולים להשתמש תבנית עיצוב דומה שמשמשת אריחי המפה של Google ברמות זום שונות כדי לספק תמונות ברזולוציה המתאימה לצילומי פנורמה בכל רמת זום.

בטעינה הראשונה של StreetViewPanorama, כברירת מחדל הוא מציג תמונה שמורכבת מ-25% (90 מעלות של קשת) הרוחב האופקי של הפנורמה ברמת זום 1. התצוגה הזו תואמת באופן כללי לשדה ראייה אנושי. שינוי מרחק תצוגה 'out' מתצוגת ברירת המחדל הזאת למעשה מספקת קשת רחבה יותר, וההגדלה מצמצמת את שדה התצוגה לקשת קטנה יותר. StreetViewPanorama מחשב באופן אוטומטי את שדה ראייה שמתאים לרמת הזום שנבחרה, ואז בוחר את התמונות המתאימות ביותר לרזולוציה הזו על ידי בחירה קבוצת משבצות שתואמת בערך למידות של המפה האופקית שדה הראייה. שדות התצוגה הבאים ממופים ל-Street View רמות הזום:

רמת הזום ב-Street View שדה ראייה (מעלות)
0 180
1 (ברירת מחדל) 90
2 45
3 22.5
4 11.25

שימו לב שגודל התמונה שמוצגת ב-Street View הוא תלויה לחלוטין בגודל המסך (רוחב) של תצוגת Street View מאגר תגים. אם אתם מספקים מאגר רחב יותר, השירות עדיין תספק את אותו שדה ראייה את מרחק התצוגה, אבל ייתכן שהיא תבחר משבצות יותר מתאימות לרזולוציה הזו.

מכיוון שכל פנורמה מורכבת מהיטל מלבני, יצירת משבצות פנורמה היא קלה יחסית. כהתחזית מספקת תמונה ביחס גובה-רוחב של 2:1, משבצות ביחס גובה-רוחב של 2:1. קל יותר להשתמש בהן, אבל משבצות מרובעות עשויות לספק ביצועים טובים יותר במפות ריבועיות (מכיוון ששדה הראייה יהיה ריבועי).

למשבצות 2:1, תמונה אחת שמקיפה את כל הפנורמה מייצג את כל ה"עולם" הפנורמה (תמונת הבסיס) עם מרחק התצוגה רמה 0, וכל הצעה של רמת זום הולכת וגדלה 4 משבצות של zoomLevel. (למשל, ב- רמת זום 2, הפנורמה כולה מורכבת מ-16 משבצות.) הערה: רמות הזום ב-Street View הריצוף לא תואם ישירות לרמות המרחק מהתצוגה כפי שהן סופקו באמצעות אמצעי הבקרה של Street View; במקום זאת, שינוי מרחק התצוגה בפקדים של Street View ברמות לבחור שדה תצוגה (FoV), שממנו המשבצות נבחרו.

נוף פנורמי של רחוב עירוני שמחולק לאריחים

באופן כללי, כדאי לתת שם למשבצות התמונות כדי שהן שנבחר באופן פרוגרמטי. סכמת שמות כזו בהמשך מוסבר בהרחבה על טיפול בהתאמה אישית בקשות של פנורמה.

טיפול בבקשות פנורמה מותאמת אישית

כדי להשתמש בתמונה פנורמית בהתאמה אישית, צריך להתקשר StreetViewPanorama.registerPanoProvider(), ציון השם של ספק הפנורמה המותאם אישית שלך. ספק הפנורמה ה-method חייב להחזיר אובייקט StreetViewPanoramaData, והוא כולל החתימה הבאה:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData הוא אובייקט של טופס:

{
  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
  ]
}

הצגת תמונת פנורמה מותאמת אישית באופן הבא:

  • מגדירים את StreetViewPanoramaOptions.pano לערך מותאם אישית.
  • שיחת טלפון StreetViewPanorama.registerPanoProvider() כדי לספק פונקציה מותאמת אישית של ספק תמונת פנורמה.
  • הטמעת הפונקציה של ספק הפנורמה המותאמת אישית כדי לטפל צוין pano.
  • לבנות StreetViewPanoramaData לאובייקט.
  • מגדירים את StreetViewTileData.getTileUrl למאפיין של שם הפונקציה של ספק משבצות בהתאמה אישית שאתם מספקים. עבור לדוגמה, getCustomPanoramaTileUrl.
  • הטמעת הפונקציה של ספק המשבצות בהתאמה אישית, כפי שמוצג בדוגמאות שלמטה.
  • מחזירים את האובייקט StreetViewPanoramaData.

הערה: אין להגדיר position באופן ישיר ב-StreetViewPanorama כשרוצים להציג תמונות פנורמה מותאמות אישית, כך שמיקום כזה ילמד את הרחוב כדאי להיכנס לשירות כדי לבקש את סגירה של תמונות ברירת המחדל ב-Street View למיקום הזה. במקום זאת, הגדירו את המיקום הזה בתוך של אובייקט StreetViewPanoramaData בהתאמה אישית שדה location.latLng.

הדוגמה הבאה מציגה פנורמה מותאמת אישית של Google סידני במשרד. לתשומת ליבכם: בדוגמה הזו לא נעשה שימוש במפה או ב-Street View שמוגדר כברירת מחדל תוכן ויזואלי:

TypeScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

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

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>

    <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
להצגת דוגמה

כדאי לנסות דוגמה

ספק הפנורמה המותאם אישית מחזיר את המשבצת המתאימה שניתנה את מזהה הפנורמה, את רמת הזום ואת הקואורדינטות של משבצת הפנורמה שהועברה. בחירת התמונה תלויה בערכים האלה, ולכן היא שימושית לתת שמות לתמונות שאפשר לבחור באופן פרוגרמטי, של הערכים שמועברים, כמו pano_zoom_tileX_tileY.png

הדוגמה הבאה מוסיפה חץ נוסף לתמונה, בנוסף ל- חיצי ניווט שמוגדרים כברירת מחדל ב-Street View, שמצביעים אל Google סידני וקישורים לתמונות המותאמות אישית:

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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

JavaScript

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

#street-view {
  height: 100%;
}

style.css

HTML

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>

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

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

כדאי לנסות דוגמה