Street View

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

ב-Google Street View אפשר לראות תמונות פנורמיות של 360 מעלות מכבישים ייעודיים בכל אזור הכיסוי.

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

הכיסוי שזמין דרך Google Maps Android API v2 זהה לכיסוי של אפליקציית מפות Google במכשיר Android. מידע נוסף על Street View ועל האזורים הנתמכים זמין במפה האינטראקטיבית מידע על Street View.

הכיתה StreetViewPanorama יוצרת מודל של התמונה הפנורמית של Street View באפליקציה. בממשק המשתמש, תמונה פנורמית מיוצגת על ידי אובייקט מסוג StreetViewPanoramaFragment או StreetViewPanoramaView.

דוגמאות קוד

המאגר ApiDemos ב-GitHub כולל דוגמאות שממחישות את השימוש ב-Street View.

דוגמאות ל-Kotlin:

דוגמאות Java:

סקירה כללית על Street View ב-SDK של מפות ל-Android

ה-SDK של מפות Google ל-Android מספק שירות Street View לקבלת תמונות ולביצוע פעולות עיבוד עליהן, שמשמש את Google Street View. התמונות יחזרו כתמונות פנורמיות.

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

StreetViewPanorama מספק נגן שמציג את התמונה הפנורמית ככדור עם מצלמה במרכזו. אפשר להשתמש בStreetViewPanoramaCamera כדי לשלוט בהגדרות הזום והכיוון (הטיה וכיוון) של המצלמה.

שנתחיל?

הגדרת פרויקט

כדי להגדיר פרויקט של Maps SDK ל-Android, פועלים לפי מדריך למתחילים.

איך בודקים אם אפשר להוסיף פנורמה של Street View

ספריית הלקוח של Google Play Services SDK כוללת כמה דוגמאות ל-Street View שאפשר לייבא לפרויקט ולהשתמש בהן כבסיס לפיתוח. במבוא מפורטות הנחיות לייבוא הדוגמאות.

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

שימוש ב-API

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

הוספת פנורמה ב-Street View

כדי להוסיף תמונה פנורמית של Street View כמו זו:

הדגמה של פנורמה ב-Street View

לסיכום:

  1. מוסיפים אובייקט Fragment לפעילות שתטפל בפנורמה של Street View. הדרך הקלה ביותר לעשות זאת היא להוסיף רכיב <fragment> לקובץ הפריסה של Activity.
  2. מטמיעים את הממשק OnStreetViewPanoramaReadyCallback ומשתמשים ב-method‏ onStreetViewPanoramaReady(StreetViewPanorama) כדי לקבל אחיזה לאובייקט StreetViewPanorama.
  3. כדי לרשום את הקריאה החוזרת, צריך להפעיל את הפונקציה getStreetViewPanoramaAsync() בחלק.

בהמשך מפורט מידע נוסף על כל שלב.

הוספת קטע קוד

מוסיפים רכיב <fragment> לקובץ הפריסה של הפעילות כדי להגדיר אובייקט Fragment. ברכיב הזה, מגדירים את המאפיין class בתור com.google.android.gms.maps.StreetViewPanoramaFragment (או SupportStreetViewPanoramaFragment).

דוגמה לקטע בקובץ פריסה:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

הוספת קוד Street View

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

Kotlin

class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

Java

class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

בשיטה onCreate() של Activity, מגדירים את קובץ הפריסה בתור תצוגת התוכן. לדוגמה, אם שם קובץ הפריסה הוא main.xml, צריך להשתמש בקוד הזה:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    val streetViewPanoramaFragment =
        supportFragmentManager
            .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}

כדי לקבל אחיזה בחלקיק, קוראים ל-FragmentManager.findFragmentById() ומעבירים לו את מזהה המשאב של האלמנט <fragment>. שימו לב שמזהה המשאב R.id.streetviewpanorama מתווסף באופן אוטומטי לפרויקט Android כשמפתחים את קובץ הפריסה.

לאחר מכן משתמשים ב-getStreetViewPanoramaAsync() כדי להגדיר את פונקציית ה-callback בחלק.

Kotlin

val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

Java

SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

משתמשים בשיטת הקריאה החוזרת onStreetViewPanoramaReady(StreetViewPanorama) כדי לאחזר מופע של StreetViewPanorama שאינו null, שאפשר להשתמש בו.

Kotlin

override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

Java

@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

מידע נוסף על הגדרת המצב הראשוני

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

Kotlin

val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

Java

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

מידע נוסף על StreetViewPanoramaFragment

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

StreetViewPanoramaView

StreetViewPanoramaView, תת-סוג של הכיתה View ב-Android, מאפשר להציב תמונה פנורמית של Street View ב-View של Android. View מייצג אזור מלבני במסך, והוא אבן בניין בסיסית לאפליקציות ולווידג'טים של Android. בדומה ל-StreetViewPanoramaFragment, ה-StreetViewPanoramaView משמש כקונטיינר של התמונה הפנורמית, ומציג את התכונות המרכזיות באמצעות האובייקט StreetViewPanorama. משתמשים בכיתה הזו צריכים להעביר את כל השיטות של מחזור החיים של הפעילות, כמו onCreate(), ‏ onDestroy(), ‏ onResume() ו-onPause()), לשיטות התואמות בכיתה StreetViewPanoramaView.

התאמה אישית של התכונה שבשליטת המשתמש

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

הגדרת המיקום של התמונה הפנורמית

כדי להגדיר את המיקום של הפנורמה ב-Street View, צריך להפעיל את הפונקציה StreetViewPanorama.setPosition() ולהעביר את הערך LatLng. אפשר גם להעביר את radius ו-source כפרמטרים אופציונליים.

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

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

Kotlin

val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

Java

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);

לחלופין, אפשר להעביר את הערך panoId אל StreetViewPanorama.setPosition() כדי להגדיר את המיקום על סמך מזהה פנורמה.

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

Kotlin

streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

Java

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

הגדלה והקטנה של התצוגה

אפשר לשנות את רמת הזום באופן פרוגרמטי על ידי הגדרת StreetViewPanoramaCamera.zoom. הגדרת הזום ל-1.0 תגדיל את התמונה פי 2.

קטע הקוד הבא משתמש ב-StreetViewPanoramaCamera.Builder() כדי ליצור מצלמה חדשה עם ההטיה והכיוון של המצלמה הקיימת, תוך הגדלת מרחק התצוגה ב-50%.

Kotlin

val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

Java

float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

הגדרת כיוון המצלמה (נקודת המבט)

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

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

קטע הקוד הבא משתמש ב-StreetViewPanoramaCamera.Builder() כדי ליצור מצלמה חדשה עם מרחק התצוגה וההטיה של המצלמה הקיימת, תוך שינוי המיקום ב-30 מעלות שמאלה.

Kotlin

val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

Java

float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

קטע הקוד הבא מטה את המצלמה כלפי מעלה ב-30 מעלות.

Kotlin

var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()

Java

float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

אנימציה של תנועות המצלמה

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

Kotlin

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)

Java

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);

בתמונה הבאה מוצגת התוצאה כשמגדירים שהאנימציה שלמעלה תרוץ כל 2,000 אלפיות שנייה, באמצעות Handler.postDelayed():

הדגמה של אנימציה של פנורמה ב-Street View