सड़क दृश्य

प्लैटफ़ॉर्म चुनें: 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-डिग्री पैनोरमा बनता है, जिसमें स्फ़ीर पर एक प्रोजेक्शन दिखता है. साथ ही, इमेज को स्फ़ीर के दो-आयामी सतह पर दिखाया जाता है.

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

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

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

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

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

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

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

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

Android फ़्रैगमेंट में 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 के 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);

इस्तेमाल के लिए तैयार, 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);
}

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

मैप के उलट, एक्सएमएल की मदद से स्ट्रीट व्यू पैनोरमा की शुरुआती स्थिति को कॉन्फ़िगर नहीं किया जा सकता. हालांकि, पैनोरमा को प्रोग्राम के हिसाब से कॉन्फ़िगर किया जा सकता है. इसके लिए, अपने चुने गए विकल्पों वाला 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 फ़्रैगमेंट क्लास का सबक्लास है. इसकी मदद से, Android फ़्रैगमेंट में Street View पैनोरमा डाला जा सकता है. StreetViewPanoramaFragment ऑब्जेक्ट, पैनोरमा के लिए कंटेनर के तौर पर काम करते हैं और StreetViewPanorama ऑब्जेक्ट का ऐक्सेस देते हैं.

StreetViewPanoramaView

StreetViewPanoramaView, AndroidView क्लास का सबक्लास है. इसकी मदद से, Android 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' पैनोरमा में संग्रहालयों, सार्वजनिक इमारतों, कैफ़े, और कारोबारों जैसी जगहों के अंदर की तस्वीरें शामिल हो सकती हैं. ध्यान दें कि हो सकता है कि बताई गई जगह के लिए, आउटडोर पैनोरमा मौजूद न हों.

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

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

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

यहां दिया गया स्निपेट, 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 पर जाकर, कैमरे के ओरिएंटेशन का पता लगाया जा सकता है. इसके लिए, कैमरे के झुकाव और दिशा को सेट करें.

बियरिंग
कैमरे की दिशा, डिग्री में बताई गई है. यह दिशा, कैमरे के लोकस के आस-पास, उत्तर से घड़ी की दिशा में होती है. सही उत्तर 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);

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

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