सड़क दृश्य

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

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

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

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

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

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

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

सारांश में:

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

      

फ़्रैगमेंट को हैंडल करने के लिए, 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)

      

onStreetViewPanoramaReady(StreetViewPanorama) कॉलबैक तरीके का इस्तेमाल करके, 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)
}

      

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

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

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

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

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

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

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

अगर आपको उस इलाके के दायरे को चौड़ा करना है या जहां से स्ट्रीट व्यू मिलता है, तो वहां का दायरा अच्छा होता है. शून्य के दायरे का मतलब है कि पैनोरामा 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() को कॉल करें. ऐनिमेशन, मौजूदा कैमरे की विशेषताओं और कैमरे की नई विशेषताओं के बीच अंतर करता है. बिना ऐनिमेशन के सीधे कैमरे पर जाने के लिए, कुल समय शून्य पर सेट करें.

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 के पैनोरामा ऐनिमेशन ऐनिमेशन का डेमो