सड़क दृश्य

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

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

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

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

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

कोड सैंपल

GitHub पर मौजूद ApiDemos रिपॉज़िटरी में, ऐसे सैंपल शामिल हैं जिनसे Street View के इस्तेमाल के बारे में पता चलता है.

Kotlin के सैंपल:

Java के सैंपल:

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

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

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

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

अपनी प्रोफ़ाइल बनाना शुरू करें

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

Maps SDK for Android प्रोजेक्ट सेट अप करने के लिए, शुरू करने से जुड़ी गाइड पढ़ें.

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

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

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

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

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

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

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

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

सारांश में:

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

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

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

StreetViewPanoramaView

StreetViewPanoramaView, Android View क्लास की सबक्लास है. इसकी मदद से, Android View में Street 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);

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

आस-पास के पैनोरमा के लिए पैनोरमा आईडी वापस पाने के लिए, पहले 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 पर सेट करने से, इमेज दो गुना बड़ी हो जाएगी.

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

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

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

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