सड़क दृश्य

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

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

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

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

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

कोड सैंपल

GitHub पर मौजूद ApiDemos repository में, Street View के इस्तेमाल के बारे में बताने वाले सैंपल शामिल हैं.

Kotlin के सैंपल:

Java के सैंपल:

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

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

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

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

शुरू करें

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

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

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

Google Play सेवाओं के 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. उस गतिविधि में कोई फ़्रैगमेंट ऑब्जेक्ट जोड़ें जो 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 जोड़ने का सबसे आसान तरीका है. पहला चरण, कॉलबैक इंटरफ़ेस लागू करना है:

Kotlin

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

Java

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

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

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

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

मैप के उलट, एक्सएमएल के ज़रिए 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 फ़्रैगमेंट क्लास की सबक्लास है. इसकी मदद से, Street View पैनोरामा को Android फ़्रैगमेंट में जोड़ा जा सकता है. 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 मीटर होता है. अगर मिलते-जुलते इलाके में एक से ज़्यादा पैनोरामा हैं, तो एपीआई सबसे अच्छा मैच लौटाएगा.

अगर आपको 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() का इस्तेमाल करके, मौजूदा कैमरे के टिल्ट और बियरिंग के साथ एक नया कैमरा बनाया गया है. साथ ही, ज़ूम को पचास प्रतिशत बढ़ाया गया है.

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 कैमरे का ओरिएंटेशन तय किया जा सकता है StreetViewPanoramaCamera.

बियरिंग
कैमरा जिस दिशा में पॉइंट कर रहा है. इसे कैमरे के लोकस के आस-पास, असली उत्तर से क्लॉकवाइज़ डिग्री में तय किया जाता है. असली उत्तर 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 पैनोरमा ऐनिमेशन डेमो