स्ट्रीट व्यू

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

Google Street View, पूरे कवरेज एरिया में सड़कों से पैनोरामा 360-डिग्री व्यू दिखाता है.

इस वीडियो में दिखाया गया है कि Street View सेवा का इस्तेमाल करके, अपने उपयोगकर्ताओं को मैप पर मौजूद किसी पते का असल अनुभव कैसे दिया जा सकता है. साथ ही, उन्हें डेस्टिनेशन या किसी भी जगह के बारे में सही जानकारी दी जा रही है.

Google Maps Android एपीआई v2 से उपलब्ध कवरेज वही होती है जो आपके Android डिवाइस पर, Google Maps ऐप्लिकेशन को मिलती है. Street View के बारे में जानकारी देने के लिए, इंटरैक्टिव मैप पर Street View के बारे में पढ़ें और उन जगहों को देखें.

StreetViewPanorama क्लास, आपके ऐप्लिकेशन में Street View पैनोरामा को मॉडल करती है. आपके यूज़र इंटरफ़ेस (यूआई) में, एक पैनोरामा को StreetViewPanoramaFragment या StreetViewPanoramaView ऑब्जेक्ट से दिखाया जाता है.

कोड सैंपल

GitHub पर ApiDemos डेटा स्टोर करने की जगह में, ऐसे सैंपल शामिल हैं जो Street View के इस्तेमाल के बारे में बताते हैं.

Kotlin सैंपल:

Java सैंपल:

Android के लिए Maps SDK टूल में Street View की खास जानकारी

Android के लिए Maps SDK टूल, Google Street View में इस्तेमाल की गई तस्वीरों के संग्रह को हासिल करने और उसमें बदलाव करने के लिए Street View की सेवा देता है. इमेज, पैनोरामा के तौर पर दिखाई जाती हैं.

हर Street View पैनोरामा एक इमेज या इमेज का सेट होता है, जो एक ही जगह से पूरा 360-डिग्री व्यू दिखाता है. इमेज, इक्वीरेक्टैंग्युलर (प्लेट केरे) प्रोजेक्शन के हिसाब से होती हैं. इसमें 360 डिग्री हॉरिज़ॉन्टल व्यू (पूरी तरह रैप-अराउंड) और 180 डिग्री का वर्टिकल व्यू (सीधे ऊपर से सीधे नीचे की ओर) मिलता है. नतीजे के तौर पर मिलने वाला 360-डिग्री पैनोरामा का अनुमान, उस गोल घेरे की दो-डाइमेंशन वाली सतह पर लिपटी हुई इमेज पर पड़ता है.

StreetViewPanorama ऐसा व्यूअर उपलब्ध कराता है जो पैनोरामा को गोले के तौर पर रेंडर करता है और इसके बीच में कैमरा होता है. कैमरे के ज़ूम और ओरिएंटेशन (झुकाव और बेयरिंग) को कंट्रोल करने के लिए, StreetViewPanoramaCamera को बदला जा सकता है.

शुरू करें

प्रोजेक्ट सेट अप करना

Android प्रोजेक्ट के लिए Maps SDK टूल सेट अप करने के लिए, शुरुआती निर्देश का पालन करें.

पैनोरामा जोड़ने से पहले, Street View के पैनोरामा की उपलब्धता देखें

Google Play services की SDK क्लाइंट लाइब्रेरी में Street View के कुछ सैंपल शामिल होते हैं. इन्हें अपने प्रोजेक्ट में इंपोर्ट किया जा सकता है और डेवलप करने के लिए आधार के तौर पर इस्तेमाल किया जा सकता है. सैंपल इंपोर्ट करने के दिशा-निर्देशों के बारे में जानने के लिए, शुरुआती जानकारी देखें.

Android Utility लाइब्रेरी के लिए Maps SDK टूल, क्लास की एक ओपन सोर्स लाइब्रेरी है. यह कई तरह के ऐप्लिकेशन के लिए काम की होती है. GitHub रिपॉज़िटरी में Street View मेटाडेटा यूटिलिटी शामिल है. यह यूटिलिटी यह जांच करती है कि कोई जगह Street View के साथ काम करती है या नहीं. किसी Android ऐप्लिकेशन में Street View पैनोरामा जोड़ते समय होने वाली गड़बड़ियों से बचा जा सकता है. इसके लिए, इस मेटाडेटा यूटिलिटी को कॉल करें और रिस्पॉन्स OK मिलने पर ही Street View पैनोरामा जोड़ें.

एपीआई का इस्तेमाल करना

किसी Android फ़्रैगमेंट में स्ट्रीट व्यू पैनोरामा जोड़ने के लिए, नीचे दिए गए निर्देशों का पालन करें. अपने ऐप्लिकेशन में Street View जोड़ने का यह सबसे आसान तरीका है. फिर फ़्रैगमेंट, व्यू, और पैनोरामा को पसंद के मुताबिक बनाने के बारे में ज़्यादा पढ़ें.

Street View पैनोरामा जोड़ें

इसके जैसा कोई Street View पैनोरामा जोड़ने के लिए, नीचे दिया गया तरीका अपनाएं:

Street View पैनोरामा का डेमो

सारांश में:

  1. उस गतिविधि में फ़्रैगमेंट ऑब्जेक्ट जोड़ें जो Street View के पैनोरामा को हैंडल करेगा. Activity के लिए लेआउट फ़ाइल में <fragment> एलिमेंट को जोड़ना.
  2. OnStreetViewPanoramaReadyCallback इंटरफ़ेस लागू करें और onStreetViewPanoramaReady(StreetViewPanorama) कॉलबैक तरीके का इस्तेमाल करके StreetViewPanorama ऑब्जेक्ट को हैंडल करें.
  3. कॉलबैक को रजिस्टर करने के लिए, फ़्रैगमेंट पर मौजूद getStreetViewPanoramaAsync() को कॉल करें.

नीचे हर चरण के बारे में ज़्यादा जानकारी दी गई है.

कोई फ़्रैगमेंट जोड़ें

फ़्रैगमेंट ऑब्जेक्ट तय करने के लिए, गतिविधि की लेआउट फ़ाइल में <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 इंटरफ़ेस लागू करना होगा और StreetViewPanoramaFragment या StreetViewPanoramaView ऑब्जेक्ट पर कॉलबैक का एक इंस्टेंस सेट करना होगा. इस ट्यूटोरियल में StreetViewPanoramaFragment का इस्तेमाल किया गया है, क्योंकि यह आपके ऐप्लिकेशन में Street View को जोड़ने का सबसे आसान तरीका है. सबसे पहले, कॉलबैक इंटरफ़ेस को लागू करें:

Kotlin



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

Java


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

अपने Activity के onCreate() तरीके में, लेआउट फ़ाइल को कॉन्टेंट व्यू के तौर पर सेट करें. उदाहरण के लिए, अगर लेआउट फ़ाइल का नाम 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> एलिमेंट का रिसॉर्स आईडी पास करें. ध्यान दें कि लेआउट फ़ाइल बनाने पर, Android प्रोजेक्ट में संसाधन आईडी R.id.streetviewpanorama अपने-आप जुड़ जाता है.

इसके बाद, फ़्रैगमेंट पर कॉलबैक सेट करने के लिए, 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);

StreetViewPanorama के नॉन-शून्य इंस्टेंस को फिर से पाने के लिए, onStreetViewPanoramaReady(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 पैनोरामा की शुरुआती स्थिति को कॉन्फ़िगर नहीं किया जा सकता. हालांकि, आपके बताए गए विकल्पों वाले StreetViewPanoramaOptions ऑब्जेक्ट को पास करके, पैनोरामा को प्रोग्राम के हिसाब से कॉन्फ़िगर किया जा सकता है.

  • अगर StreetViewPanoramaFragment का इस्तेमाल किया जा रहा है, तो फ़्रैगमेंट बनाने और पसंद के मुताबिक कॉन्फ़िगर किए गए विकल्पों में पास करने के लिए, StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options) स्टैटिक फ़ैक्ट्री तरीके का इस्तेमाल करें.
  • अगर StreetViewPanoramaView का इस्तेमाल किया जा रहा है, तो StreetViewPanoramaView(Context, 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));

StreetViewPanoramaफ़्रैगमेंट के बारे में ज़्यादा जानकारी

StreetViewPanoramaFragment, Android फ़्रैगमेंट क्लास की सब-क्लास है. इससे आपको Android फ़्रैगमेंट में Street View पैनोरामा रखने की सुविधा मिलती है. StreetViewPanoramaFragment ऑब्जेक्ट, पैनोरामा के लिए कंटेनर का काम करते हैं और StreetViewPanorama ऑब्जेक्ट का ऐक्सेस देते हैं.

StreetViewPanoramaView

StreetViewPanoramaView, Android 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 मीटर है. अगर मेल खाने वाले एरिया में एक से ज़्यादा पैनोरामा हैं, तो एपीआई सबसे सही मैच दिखाएगा.

अगर आप चाहते हैं कि 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();

कैमरे का ओरिएंटेशन (पॉइंट ऑफ़ व्यू) सेट करना

StreetViewPanoramaCamera पर बियरिंग और टिल्ट को सेट करके, Street View कैमरे का ओरिएंटेशन तय किया जा सकता है.

बियरिंग
जिस दिशा में कैमरा संकेत कर रहा है, उसे कैमरे की जगह के आस-पास सही उत्तर से घड़ी की दिशा में डिग्री में बताया जाता है. सही उत्तर 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);

इस इमेज में Handler.postDelayed() का इस्तेमाल करके, ऊपर दिए गए ऐनिमेशन को हर 2,000 मिलीसेकंड पर चलाने के लिए शेड्यूल करने पर नतीजा दिखाया गया है:

Street View पैनोरामा ऐनिमेशन का डेमो