स्ट्रीट व्यू

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

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

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

Google Maps Android API 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 टूल सेट अप करने के लिए, शुरुआती निर्देश देखें.

पैनोरामा जोड़ने से पहले, 'स्ट्रीट व्यू' पैनोरामा की उपलब्धता देखें

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

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

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

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

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

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

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

सारांश में:

  1. उस गतिविधि में फ़्रैगमेंट ऑब्जेक्ट जोड़ें जो Street View पैनोरामा को हैंडल करेगा. ऐसा करने का सबसे आसान तरीका यह है कि Activity की लेआउट फ़ाइल में <fragment> एलिमेंट जोड़ा जाए.
  2. OnStreetViewPanoramaReadyCallback इंटरफ़ेस लागू करें और StreetViewPanorama ऑब्जेक्ट को हैंडल करने के लिए, onStreetViewPanoramaReady(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 का कोड जोड़ें

अपने ऐप्लिकेशन में स्ट्रीट व्यू पैनोरामा के साथ काम करने के लिए, आपको 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);

      

onStreetViewPanoramaReady(StreetViewPanorama) कॉलबैक का तरीका इस्तेमाल करके, 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);
}

      

शुरुआती स्थिति को कॉन्फ़िगर करने के बारे में ज़्यादा जानकारी

मैप से अलग, एक्सएमएल के ज़रिए स्ट्रीट व्यू पैनोरामा की शुरुआती स्थिति को कॉन्फ़िगर करना संभव नहीं है. हालांकि, आपके पास चुने गए विकल्पों वाले 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));

      

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

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

StreetViewPanoramaView

StreetViewPanoramaView, Android View क्लास की एक सब-क्लास है. इसकी मदद से, Android View में Street View फ़ोटो बनाई जा सकती हैं. View, स्क्रीन के आयताकार क्षेत्र को दिखाता है. यह Android ऐप्लिकेशन और विजेट के लिए बुनियादी चीज़ों का हिस्सा है. StreetViewPanoramaFragment की तरह ही, StreetViewPanoramaView भी पैनोरामा के लिए कंटेनर के तौर पर काम करता है. यह StreetViewPanorama ऑब्जेक्ट के ज़रिए मुख्य फ़ंक्शन दिखाता है. इस क्लास के उपयोगकर्ताओं को गतिविधि की लाइफ़ साइकल से जुड़े सभी तरीकों (जैसे, onCreate(), onDestroy(), onResume(), और onPause())) को StreetViewPanoramaView क्लास के हिसाब से फ़ॉरवर्ड करना होगा.

उपयोगकर्ता को कंट्रोल करने वाली सुविधा को पसंद के मुताबिक बनाना

डिफ़ॉल्ट रूप से, स्ट्रीट व्यू पैनोरामा देखते समय उपयोगकर्ता के लिए ये फ़ंक्शन उपलब्ध होते हैं: पैन करना, ज़ूम करना, और पास के पैनोरामा में यात्रा करना. 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);

      

इसके अलावा, आपके पास StreetViewPanorama.setPosition() पर panoId पास करके, पैनोरामा आईडी पर आधारित जगह की जानकारी सेट करने का विकल्प भी होता है.

आस-पास के पैनोरामा का पैनोरामा आईडी पाने के लिए, सबसे पहले StreetViewPanoramaLocation को पाने के लिए getLocation() का इस्तेमाल करें. इस ऑब्जेक्ट में मौजूदा पैनोरामा का आईडी और 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);

      

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

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