सड़क दृश्य

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

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

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

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

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

कोड सैंपल

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

Java सैंपल:

Kotlin के नमूने:

Android के लिए मैप SDK में स्ट्रीट दृश्य का अवलोकन

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

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

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

शुरू करना

Android प्रोजेक्ट के लिए Maps SDK टूल सेट अप करने के लिए, शुरुआती निर्देश देखें. फिर नीचे बताए गए अनुसार, एक सड़क दृश्य पैनोरामा जोड़ें.

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

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

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

कोई स्ट्रीट व्यू पैनोरामा जोड़ें

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

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

सारांश में:

  1. ऐसी गतिविधि में एक फ़्रैगमेंट ऑब्जेक्ट जोड़ें जो स्ट्रीट व्यू पैनोरामा को मैनेज करेगी. ऐसा करने का सबसे आसान तरीका यह है कि 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"/>

स्ट्रीट व्यू कोड जोड़ें

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

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

अपने <fragment> एलिमेंट का रिसॉर्स आईडी पास करके, FragmentManager.findFragmentById() को कॉल करके फ़्रैगमेंट का हैंडल पाएं. ध्यान दें कि लेआउट फ़ाइल बनाते समय, 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 फ़्रैगमेंट क्लास की सब-क्लास है. इसकी मदद से, Street View के पैनोरामा को Android फ़्रैगमेंट में रखा जा सकता है. StreetViewPanoramaFragment ऑब्जेक्ट, पैनोरामा के लिए कंटेनर के तौर पर काम करता है और StreetViewPanorama ऑब्जेक्ट का ऐक्सेस देता है.

StreetViewPanoramaView

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

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

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

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

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

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

अगर आप स्ट्रीट व्यू को सिर्फ़ बाहर से पैनोरामा देखने के लिए सीमित करना चाहते हैं, तो स्रोत के लिए यह मददगार हो सकता है. डिफ़ॉल्ट रूप से, 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-अक्ष ऊपर या नीचे झुकाएं. यह रेंज -00 से 00 के बीच है जिसमें -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() का इस्तेमाल करके, ऊपर दिए गए ऐनिमेशन को हर 2000 मिलीसेकंड पर चलाने के लिए शेड्यूल करते हैं:

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