सड़क दृश्य

प्लैटफ़ॉर्म चुनें: 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 के इस्तेमाल के बारे में बताते हैं.

Java सैंपल:

Kotlin के सैंपल:

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 टूल ऐसी क्लास की ओपन सोर्स लाइब्रेरी है जो कई तरह के ऐप्लिकेशन के लिए काम की होती है. Street View मेटाडेटा इस्तेमाल करने की सुविधा, GitHub की डेटा स्टोर करने की जगह में शामिल होती है. यह सुविधा यह जांच करती है कि किसी जगह पर Street View की सुविधा काम करती है या नहीं. किसी Android ऐप्लिकेशन में Street View पैनोरामा जोड़ते समय, इस मेटाडेटा यूटिलिटी को कॉल करके और Street View पैनोरामा सिर्फ़ तब जोड़ा जा सकता है, जब रिस्पॉन्स 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 कोड जोड़ें

अपने ऐप्लिकेशन के अंदर Street View पैनोरामा का इस्तेमाल करने के लिए, आपको OnStreetViewPanoramaReadyCallback इंटरफ़ेस लागू करना होगा. साथ ही, StreetViewPanoramaFragment या StreetViewPanoramaView ऑब्जेक्ट पर कॉलबैक का एक इंस्टेंस सेट करना होगा. इस ट्यूटोरियल में StreetViewPanoramaFragment का इस्तेमाल किया गया है, क्योंकि अपने ऐप्लिकेशन में Street View जोड़ने का यह सबसे आसान तरीका है. इसके लिए, सबसे पहले कॉलबैक इंटरफ़ेस को लागू करें:

Java


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

Kotlin


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

अपने Activity के onCreate() तरीके में, लेआउट फ़ाइल को कॉन्टेंट व्यू के तौर पर सेट करें. उदाहरण के लिए, अगर लेआउट फ़ाइल का नाम main.xml है, तो इस कोड का इस्तेमाल करें:

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

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)
}

फ़्रैगमेंट का हैंडल पाने के लिए, FragmentManager.findFragmentById() को कॉल करें और उसे अपने <fragment> एलिमेंट का रिसॉर्स आईडी पास करें. ध्यान दें कि लेआउट फ़ाइल बनाने पर, Android प्रोजेक्ट में रिसॉर्स आईडी R.id.streetviewpanorama अपने-आप जुड़ जाता है.

इसके बाद, फ़्रैगमेंट पर कॉलबैक सेट करने के लिए, getStreetViewPanoramaAsync() का इस्तेमाल करें.

Java


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

Kotlin


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

इस्तेमाल के लिए तैयार, StreetViewPanorama के नॉन-शून्य इंस्टेंस को फिर से पाने के लिए, onStreetViewPanoramaReady(StreetViewPanorama) कॉलबैक तरीके का इस्तेमाल करें.

Java


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

Kotlin


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

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

मैप के उलट, एक्सएमएल के ज़रिए 'स्ट्रीट व्यू' पैनोरामा की शुरुआती स्थिति को कॉन्फ़िगर नहीं किया जा सकता. हालांकि, आपके तय किए गए विकल्पों वाले StreetViewPanoramaOptions ऑब्जेक्ट को पास करके, पैनोरामा को प्रोग्राम के हिसाब से कॉन्फ़िगर किया जा सकता है.

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

Java


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

Kotlin


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

StreetViewPanoramaFragment के बारे में ज़्यादा जानकारी

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

स्ट्रीटव्यूपैनोरामाव्यू

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

उपयोगकर्ता के कंट्रोल किए जाने वाले फ़ंक्शन को पसंद के मुताबिक बनाएं

Street View पैनोरामा देखते समय, डिफ़ॉल्ट रूप से ये सुविधाएं उपलब्ध होती हैं: पैन करना, ज़ूम करना, और आस-पास के पैनोरामा पर जाना. StreetViewPanorama पर तरीकों से, उपयोगकर्ता के कंट्रोल किए जाने वाले जेस्चर को चालू और बंद किया जा सकता है. हाथ के जेस्चर (हाव-भाव) की सुविधा बंद होने पर भी, प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस में बदलाव किए जा सकते हैं.

पैनोरामा की जगह सेट करें

Street View पैनोरामा की जगह सेट करने के लिए, LatLng को पास करके, StreetViewPanorama.setPosition() को कॉल करें. radius और source को वैकल्पिक पैरामीटर के तौर पर भी पास किया जा सकता है.

अगर आप उस क्षेत्र को चौड़ा या छोटा करना चाहते हैं जिसमें सड़क दृश्य एक मिलते-जुलते पैनोरामा की खोज करता है, तो दायरा उपयोगी होता है. 0 रेडियस का मतलब है कि पैनोरामा को बिलकुल बताए गए LatLng से लिंक किया जाना चाहिए. डिफ़ॉल्ट दायरा 50 मीटर है. अगर मैच करने वाले एरिया में एक से ज़्यादा पैनोरामा हैं, तो एपीआई सबसे अच्छा मैच दिखाएगा.

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

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

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)

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

पास के पैनोरामा का पैनोरामा आईडी फिर से पाने के लिए, पहले getLocation() StreetViewPanoramaLocation का इस्तेमाल करें. इस ऑब्जेक्ट में मौजूदा पैनोरामा का आईडी और StreetViewPanoramaLink ऑब्जेक्ट का कलेक्शन है. हर ऑब्जेक्ट में मौजूदा पैनोरामा से कनेक्ट किए गए पैनोरामा का आईडी शामिल है.

Java


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

Kotlin


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

ज़ूम इन और ज़ूम आउट करना

StreetViewPanoramaCamera.zoom सेटिंग करके, ज़ूम के लेवल को प्रोग्राम के हिसाब से बदला जा सकता है. ज़ूम को 1.0 पर सेट करने से इमेज, 2 के फ़ैक्टर से बड़ी हो जाएगी.

नीचे दिया गया स्निपेट, मौजूदा कैमरे के झुकाव और बियरिंग के साथ एक नया कैमरा बनाने के लिए StreetViewPanoramaCamera.Builder() का इस्तेमाल करता है और ज़ूम को पचास प्रतिशत तक बढ़ाता है.

Java


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

Kotlin


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

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

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

बियरिंग
कैमरे की जगह के आस-पास की दिशा, जिसमें कैमरा उत्तर दिशा से घड़ी की दिशा में डिग्री में बताया गया है. सही उत्तर 0 है, पूर्व का मतलब 90 है, दक्षिण 180 है, पश्चिम 270 है.
झुकाएं
Y-ऐक्सिस ऊपर या नीचे की ओर झुका हुआ है. इसकी सीमा -90 से 0 से 90 तक है, जिसमें -90 सीधे नीचे की ओर दिखते हैं, 0 क्षितिज पर केंद्रित है, और 90 सीधे ऊपर की ओर देखते हैं. इस फ़र्क़ को, कैमरे के शुरुआती डिफ़ॉल्ट पिच से मापा जाता है. यह पिच, ज़्यादातर हॉरिज़ॉन्टल हॉरिज़ॉन्टल होती है, लेकिन हमेशा ऐसा नहीं होता. उदाहरण के लिए, किसी पहाड़ी पर ली गई इमेज में शायद एक डिफ़ॉल्ट पिच होगी, जो हॉरिज़ॉन्टल नहीं होगी.

नीचे दिया गया स्निपेट, मौजूदा कैमरे के ज़ूम और टिल्ट की मदद से नया कैमरा बनाने के लिए, StreetViewPanoramaCamera.Builder() का इस्तेमाल करता है. साथ ही, बियरिंग को बाईं ओर 30 डिग्री बदलता है.

Java


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

Kotlin


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

नीचे दिया गया स्निपेट, कैमरे को 30 डिग्री ऊपर की ओर झुकाता है.

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

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()

कैमरे के मूवमेंट को ऐनिमेट करें

कैमरे की गतिविधियों को ऐनिमेट करने के लिए, StreetViewPanorama.animateTo() पर कॉल करें. ऐनिमेशन, कैमरे के मौजूदा एट्रिब्यूट और कैमरे के नए एट्रिब्यूट के बीच का अंतर दिखाता है. अगर आपको बिना ऐनिमेशन के सीधे कैमरे पर जाना है, तो अवधि को 0 पर सेट करें.

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

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)

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

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