Street View

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

Google Street View מספק נופים פנורמיים של 360 מעלות מכבישים ייעודיים בכל שטח הכיסוי שלו.

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

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

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

דוגמאות קוד

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

דוגמאות של קוטלין:

דוגמאות 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 לActivity שיטפל בתמונה הפנורמית של Street View. הדרך הקלה ביותר לעשות זאת היא להוסיף רכיב <fragment> לקובץ הפריסה של Activity.
  2. מטמיעים את הממשק OnStreetViewPanoramaReadyCallback ומשתמשים ב-method‏ onStreetViewPanoramaReady(StreetViewPanorama) כדי לקבל אחיזה (handle) לאובייקט 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() כדי להגדיר את הקריאה החוזרת במקטע.

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) שיטת קריאה חוזרת שנועדה לאחזר מופע שאינו null של StreetViewPanorama, מוכן לשימוש.

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

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

בקטע הקוד הבא נעשה שימוש ב-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