שירות Street View

סקירה כללית

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

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

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


ה-API של מפות Google ל-API מספק שירות Street View המאפשר להשיג תמונות ב-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 ל-Viewer של Street View. כל מפה מכילה ברירת מחדל של פנורמה ב-Street View, וניתן לאחזר אותה על ידי קריאה לשיטה getStreetView() של המפה. כשמוסיפים למפה פקד Street View, מגדירים את האפשרות streetViewControl כ-true, מחברים באופן אוטומטי את הפקד אטב-איש לפנורמת ברירת המחדל הזו של Street View.

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

קונטיינרים של Street View

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

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

מיקומים ב-Street View ונקודת תצפית

הבונה של 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>
    <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>
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 המוגדר כברירת מחדל תומך בתצוגה המקורית של שכבות-על במפה. שכבות-על מופיעות בדרך כלל ב"רמת רחוב" המעוגנת במיקומי 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 מהבניין שלך, הפעולה הזו תשנה את ברירת המחדל של הפנורמות.

הדוגמה הבאה מציגה סמנים המציינים מיקומים שונים ב-Astor Place, ניו יורק. מחליפים את התצוגה ל-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);

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

  // 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;
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>
    <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>
index.html
דוגמה

לדגום

אירועים ב-Street View

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

  • pano_changed מופעל בכל פעם שמזהה הפנורמה משתנה. האירוע הזה אינו מבטיח שהנתונים המשויכים בפנורמת (כמו הקישורים) ישתנו גם הם כאשר האירוע הזה יופעל. האירוע הזה מציין רק שמזהה הפנום השתנה. חשוב לשים לב שמזהה הפנו
  • position_changed מופעל בכל פעם שמיקום הLatLng (בסיס) משתנה. סיבוב פנורמה לא יפעיל את האירוע הזה. הערה: אפשר לשנות את המיקום הבסיסי של הפנורמה בלי לשנות את מזהה הפנורמה המשויך, כי ה-API ישייך באופן אוטומטי את מזהה הפנורמה הקרוב ביותר למיקום הפנורמי.
  • pov_changed מופעל בכל פעם שStreetViewPov של Street View משתנה. חשוב לשים לב שהאירוע הזה עשוי לפעול גם בזמן שמיקום הצילום ומזהה הפנורמה נשארים יציבים.
  • 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

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

לדגום

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

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

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

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

ניתן ליזום בקשות עבור 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>
    <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>
index.html
דוגמה

לדגום

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

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

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

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

בחלקים הבאים מוסבר התהליך הזה.

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

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

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

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

כדור פנורמי עם נוף פנורמי של פני השטח

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

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

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

כאשר StreetViewPanorama נטען לראשונה, כברירת מחדל הוא מציג תמונה המורכבת מ-25% (90 מעלות של קשת) מהזווית האופקית של הפנורמה ברמת הגדלה 1. התצוגה הזו תואמת פחות או יותר לשדה ראייה רגיל של בני אדם. הקטנת התצוגה מתצוגת ברירת המחדל הזו מספקת בפועל קשת רחבה יותר, בעוד שההתקרבות מצמצמת את השדה של תצוגה לקשת קטנה יותר. בשדה 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מרחק מתצוגה. (לדוגמה, ברמת המרחק מהתצוגה 2, כל התמונה כוללת 16 משבצות). הערה: רמת הזום במשבצות של Street View לא תואמת ישירות לרמות הזום כפי שסופקו באמצעות הפקד של Street View. במקום זאת, הרמות של הזום ב-Street View בוחרות שדה תצוגה (FoV) שממנו בוחרים אריחים מתאימים.

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

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

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

כדי להשתמש בפנורה מותאמת אישית, צריך להתקשר למספר StreetViewPanorama.registerPanoProvider() ולציין את השם של השיטה של ספק הפנורמי המותאם אישית. השיטה של ספק הפנורמה חייבת להחזיר אובייקט 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 לבקש את תמונות ברירת המחדל של Street View שקרובות למיקום הזה. במקום זאת, צריך להגדיר את המיקום הזה בשדה location.latLng של האובייקט המותאם אישית StreetViewPanoramaData.

הדוגמה הבאה מציגה תמונה פנורמית מותאמת אישית של משרד 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>
    <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>
index.html
דוגמה

לדגום

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

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

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",
      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>
    <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>
index.html
דוגמה

לדגום